html - 3 divs next to each other of size 100% with another one as background that contains fluid photos -
i want create web page has photo background, background 300% screen wide , in every 33.33333% there photo centered responsive can maintain ratio aspect.
my html code:
<!doctype html> <html> <head> <title>aj</title> <link href="design.css" rel="stylesheet" type="text/css"> <body/> <div id="background"><img src="background.png"/> </div><!--these background image should displayed behind other 3 images 1523x993 , don't know how make stretch 3 time size of of window --> <div id="dvscreen1"><img src="2(1).png"/></div><!--these 1 of 3 photos displayed above background image, want make centered in window , responsive if window height changes wide should change , position should remain centered won't display next photo if user makes height of window small , wide large --> <div id="dvscreen2"><img src="l1.png"/></div><!-- these second photo , should have same properties first , should come right of firs, between first , second --> <div id="dvscreen3"><img src="l1.png"/></div> <!-- these photo last floated left , have same responsive properties both remain centered , resize automatically on x , y axes if user resizes window on y axes or x axes--!> </body> </html> my css code:
body{ height: 100%; overflow-x:vizible; width:300%; margin:0%; padding:0%; overflow-y:hidden; position;fixed; } #dvscreen1, #dvscreen2,#divscreen3{ width:33.3333%; height:100%; clear:none; } #dvscreen1 { margin-left:0%; border:solid red 1px; margin-top:-100%; } #dvscreen2 { margin-left:33.33333%; border:solid black 1px; text-align:center; margin-top:0%; } #dvscreen3{ margin-left:66.66666%; border:solid blue 1px; text-align:center; margin-top:0%; } #background{ min-width:100%; margin:0%; padding:0%; } thank on code
unless there's specific reason having background image set 300% size, best use background-image property in body portion of css , use no-repeat 1 of values. when browser renders html document, first visual object body , stretch out entire screen. sometimes, however, image may not cover whole screen, can see using img tag background set 300%. try other approach first if haven't already. 3 other images, contain them in div optimal results. rather have 3 secondary pictures, like:
<div id="pictures"> <img src="2(1).png"> <img src="l1.png"> <img src="l1.png"> </div> you have set specific width on container, allows code css more cleanly so:
#pictures{ width:50%; margin: 0 25%; /* example size came in head */ } #pictures img{ /* follow basic format of images */ width:33.3333%; float:left; } of course, if each of borders need different color, place id's within each img tag, change border properties. maintain aspect, try making 3 different css files corresponding user's device: mobile, tablet, , pc , adjust values accordingly.
Comments
Post a Comment