css - How to get a background picture going outside max-width div -



css - How to get a background picture going outside max-width div -

i have responsive website max-width set 1000px, need fit background image overlap 1 of divs , place total page-width bottom borders other divs.

the code have this:

class="snippet-code-css lang-css prettyprint-override">.container { width: 100%; max-width: 1000px; } .logotest { background-color: #03b9e5; height: 50px; } .navtest { background-color: #e4ed00; height: 25px; } .socialtest { background-color: #ab801a; height: 25px; } .main { height: 750px; background: url(background.jpg) no-repeat top center; margin: auto; } .line { border-bottom: 1px solid black; } .container:after { clear: both; content: "."; display: block; height: 0; visibility: hidden; } class="snippet-code-html lang-html prettyprint-override"><body> <div class="container" id="first"> <div class="logotest"> </div> <div class="socialtest"> </div> <div class="navtest"> </div> </div> <div class="line"></div> <div class="main line" id="second"> </div><div class="container"> <div id="third"> </div> </div> </body>

i first div right width , bottom border going across total page width, sec div has got background image showing, max-width of 1000px no longer apply. bottom border shown correctly (dividing sec , 3rd div) , 3rd div has got right max-width applied again.

what doing wrong/not doing max-width sec div?

your solution

if browser back upwards of background-size property plenty you, can utilize background-size: cover;. check here or here see browser support.

here code snippet show how works. sure position background-image center center if want centered.

class="snippet-code-css lang-css prettyprint-override">.container { width: 100%; max-width: 300px; margin: 0 auto; } .line { border-bottom: 1px solid black; } .logotest { background-color: #03b9e5; height: 50px; } .navtest { background-color: #e4ed00; height: 25px; } .socialtest { background-color: #ab801a; height: 25px; } .main { height: 250px; background: url(http://lorempixel.com/250/250) no-repeat center center; background-size: cover; /* magic */ } .container:after { clear: both; content: "."; display: block; height: 0; visibility: hidden; } class="snippet-code-html lang-html prettyprint-override"><body> <div class="container" id="first"> <div class="logotest"> </div> <div class="socialtest"> </div> <div class="navtest"> </div> </div> <div class="line"></div> <div class="main" id="second"> <div class="container">put content in here.</div> </div> <div class="line"></div> <div class="container"> <div id="third"> </div> </div> <div class="line"></div> </body>

last (but not least)

you might want check great article state of responsive images in web design, help if going responsive web design: responsive images done right.

css html5

Comments

Post a Comment

Popular posts from this blog

c - Compilation of a code: unkown type name string -

c - Compilation of a code: unkown type name string - i have next lines of code compiler says following: "unknown type name 'string'" both in declaration , definition of function. can tell me what's wrong? thanks. #include <stdio.h> #include <stdlib.h> #include <string.h> void frecognizeclient(string *actualclient) there no string type in c. need utilize array so: char array[10]; then can pass in function: void frecognizeclient(char *actualclient); c arrays string compilation
Read more

java - Bypassing "final local variable defined in an enclosing type" -

java - Bypassing "final local variable defined in an enclosing type" - i'm writing programme , i'm getting "the final local variable asd cannot assigned, since it's defined in enclosing type". i provide illustration not code produces error aswell. have arraylist utilize later (if define within button can't utilize later on), outside of button, pressing button should give values arraylist. in illustration "create new arraylist" cause same problem. button btn = new button("asd"); final arraylist asd = new arraylist(); btn.setonaction(new eventhandler<actionevent>() { public void handle(final actionevent event) { asd = new arraylist(); //here's error.. } }); clear arraylist , add together values. java javafx
Read more

json - Hibernate and Jackson (java.lang.IllegalStateException: Cannot call sendError() after the response has been committed) -

json - Hibernate and Jackson (java.lang.IllegalStateException: Cannot call sendError() after the response has been committed) - hello have problem hibernate , jackson. have 2 pojos @entity @table(name = "users") public class user implements serializable { static final long serialversionuid = 4235637833262722256l; @id @generatedvalue private int id; @column(name = "creation_date") private date creationdate; @column(name = "first_name") private string firstname; @column(name = "last_name") private string lastname; @version @column(name = "version") private int version; @column(name = "e_mail") private string email; @column(name = "enabled") private boolean enabled; @column(name = "login") private string login; @column(name = "password") private string password; @jsonmanagedreference("role") @onetomany(mappedby = "user", cascade = cascadetype.all,fetch = fetchtyp...
Read more