content:url in CSS for multiple images -


i asked similar question before , thought had been solved wasn't solved. time, i'm going use specific example i'm working on see if it's problem particular code.

i have in css desktop:

div.image { content:url(http://www.masterpiecetransformers.com/images/masterpiece- transformers.jpg); }  div.imagea1 { content:url(http://www.masterpiecetransformers.com/images/news.jpg); }​  div.imagea2 { content:url(http://www.masterpiecetransformers.com/images/releases.jpg); }​  div.imagea3 { content:url(http://www.masterpiecetransformers.com/images/design-team-interview-archives.jpg); }​  div.imagea4 { content:url(http://www.masterpiecetransformers.com/images/reviews.jpg); }​

then in css mobile:

div.image { content:url(http://www.masterpiecetransformers.com/images/masterpiece- transformers.jpg); width:100%; }​  div.imagea1 { content:url(http://www.masterpiecetransformers.com/images/news.jpg); width:25%; }​  div.imagea2 { content:url(http://www.masterpiecetransformers.com/images/releases.jpg); width:25%; }​  div.imagea3 { content:url(http://www.masterpiecetransformers.com/images/design-team-interview- archives.jpg); width:25%; }​  div.imagea4 { content:url(http://www.masterpiecetransformers.com/images/reviews.jpg); width:25%; }​

and in html:

<div class="containertop">  <div class="image">  </div>  </div>  <div class="breadcrumb">  <div class="imagea1">  </div>  <div class="imagea2">  </div>  <div class="imagea3">  </div>  <div class="imagea4">  </div>  </div>

i have few problems this. reason, on desktop first 2 images display (image , imagea1). on mobile, after set width of first image 100%, started displaying. however, tinkering around code try , working, went wrong , no images displaying on mobile. had seemed if setting width 100% allowing image display correctly on mobile (native image width 900 pixels, i'll altering 1024 can't imagine that's anything).

i'm doing images in way rather in more conventional way had seemed allow me specify percentage widths images useful getting right size on mobile.

i may missing obvious i've looked on code again , again , can't understand why imagea1 displays on desktop , imagea2 doesn't considering seem coded in same way.

i don't know specific issues had, noticed when tested code out.

the images didn't appear @ all, after bit of trial , error, magically did.

for test, problem had divs. divs block elements, , take full width of browser's resolution.

on browsers, trying have image stretched large viewport make crash , not render @ all. images it's important have proper size, container , properties it.

in example below, set fixed width them (100% cancer me), , fixed height (200px example).

hope helped!

.image {  content:url(http://www.masterpiecetransformers.com/images/masterpiece-  transformers.jpg);    width: 50%;    height: 200px;  }    .imagea1 {  content:url(http://www.masterpiecetransformers.com/images/news.jpg);    width: 50%;    height: 200px;  }    .imagea2 {  content:url(http://www.masterpiecetransformers.com/images/releases.jpg);    width: 50%;    height: 200px;  }    .imagea3 {  content:url(http://www.masterpiecetransformers.com/images/design-team-interview-archives.jpg);    width: 50%;    height: 200px;  }    .imagea4 {  content:url(http://www.masterpiecetransformers.com/images/reviews.jpg);    width: 50%;    height: 200px;  }
<div class="containertop">    <div class="image">  </div>    </div>    <div class="imagea1">    </div>    <div class="imagea2">    </div>    <div class="imagea3">    </div>    <div class="imagea4">    </div>


Comments

Post a Comment

Popular posts from this blog

ubuntu - PHP script to find files of certain extensions in a directory, returns populated array when run in browser, but empty array when run from terminal -

i running os ububtu 16.04. ultimate goal able run php script cron job every minute. here php script located @ /var/www/html/tests/test/index.php : <?php $directorypath = $_server['document_root']."/tests/test/data/"; echo "directorypath: $directorypath<br><br>";//check $imagefilepathsarray = glob($directorypath . "*.{png,gif}", glob_brace); echo "<br><br>imagefilepathsarray: "; print_r($imagefilepathsarray);//check ?> when open php script in browser visiting url my-ip-address/tests/test/index.php , get: directorypath: /var/www/html/tests/test/data/ imagefilepathsarray:array( [0] => /var/www/html/tests/test/data/pic.png [1] => /var/www/html/tests/test/data/pic.gif ) before writing cron job in crontab file, need check if can run anywhere using terminal . opened ubuntu terminal @ /home/ location, , executed in terminal: sudo php /var/www/html/tests/test/index.php i got following out...
Read more

php - How can i create a user dashboard -

today have questions you, want create user dashboard site, include (obviously), users data, example -email -username -and others stuff how can information, , print them in html page? if can, how can these information via php sessions? shuld use session? example, if user login, , start new session ( session_start() ), how can data print in dashboard? should use php "project"? in advice, have day , thank time!
Read more

javascript - How to detect toggling of the fullscreen-toolbar in jQuery Mobile? -

i have jquery mobile page fixed full-screen toolbar, data-tap-toggle enabled. straight under toolbar have positioned banner should slide upwards when toolbar hiding , slide downward when toolbar showing. jquery mobile toggles toolbar applying , removing ui-fixed-hidden class - sadly, can't find in documentation of toolbar widget toggle , hide or show event that. how can detect when toolbar toggled, reposition banner? .banner { position: fixed; background-color: darkseagreen; top: 46px; min-height: 48px; width: 100%; text-align: center; line-height: 48px; } <!doctype html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no"> <link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.css"> <script src="https://code.jquery.com/jquery-1....
Read more