CODEWITHSUNDEEP
htmlcss
Dasch
Dasch

Reputation: 31

Make content fixed width but make DIV background extend. (CSS)

I've searched everywhere for this but I haven't found anything (maybe because I don't know exactly how to put it into words). I'm a newbie with HTML and CSS.

What I basically have is a wrapper, nav, logo, content and footer. I added a fixed background image to the body and made my divs semi transparent. My divs have a fixed width of about 1152px, margin auto and a semi transparent background color that covers the background image. What I want to do is to make the divs transparent background color to extend to the sides, covering the full width of the screen but keeping all the content in a fixed width.

Here is an example of what I want to do: http://electricladystudios.com/ The content, nav bar, logo, it's all centered in a specific width, but the backgrounds go beyond that width.

This is my HTML body:

<body>
<div id="wrapper">

<div id="logo"> <img src="logo.png"></div>
<div id="nav">
    <ul id="navbar">
        <li><a href="blank">HOME</a></li>
        <li><a href="blank">ABOUT</a></li>
        <li><a href="blank">STUDIO</a></li>
        <li><a href="blank">GALLERY</a></li>
        <li><a href="blank">DEMOS</a></li>
        <li><a href="blank">BLOG</a></li>
        <li><a href="blank">CONTACT</a></li>
    </ul>
</div>

</div>

<div id="content">
<h1>Something </h1>

</div>

<div id=footer>
<p>WEBPAGE MADE BY ME lol</a></p>

</div>

</body>

And this is my CSS (I know there are a lot of things repeated in here, but this is my first try at coding by myself and I'm just trying to get everything to look right before I optimize the code) So please, bear with me.

@charset "utf-8";
/* CSS Document */

body {
background-image:url(bg2.jpg);
background-repeat: no-repeat;
background-position:center center;
background-attachment:fixed;
color: white;
font-family: Arial;
font-size: 1 em;}

#wrapper {

width: 1152px;
background: rgba(0, 0, 0, 0.8);
margin: auto;
margin-top: 20px;
padding: 30px;
height: 100px;
box-shadow: 0px 10px 10px 0px rgba(50, 50, 50, 0.75);   }

#logo {
display: inline-block;
width: 40%;
float: left;    }

#nav {
width: 52%;
display: inline-block;
text-align: right;
float: right;
padding: 20px;
margin-top: 5px;
margin-bottom: 75px;}


#navbar li {
font-size: 12px;
display:inline;
padding: 12px; }


#navbar li a {
text-decoration: none;
color: white;
-o-transition:.5s;
-ms-transition:.5s;
-moz-transition:.5s;
-webkit-transition:.5s; }

#navbar li a:hover {
color: #0062A4;
transition: .5s; }

a { 
text-decoration: none;
color: #0062A4;
-o-transition:.5s;
-ms-transition:.5s;
-moz-transition:.5s;
-webkit-transition:.5s;}

a:hover {
color: #C33;
transition: .5s; }



#content {
clear:both;
width: 1152px;
margin: auto;
margin-top: 20px;
margin-bottom: 20px;
padding: 30px;
height: 800px;
box-shadow: 0px 10px 10px 0px rgba(50, 50, 50, 0.75);
background: rgba(240, 240, 240, 0.6);
color: #333;
font-family: Arial;}

#footer {
width: 1152px;
background: rgba(0, 0, 0, 0.8);
text-align: right;
color: grey;
margin:auto;
padding:5px;
padding-left: 30px;
padding-right: 30px;

box-shadow: 0px 10px 10px 0px rgba(50, 50, 50, 0.75);
font-size: 75%; }

Any help will be greatly appreciated! Thanks

Upvotes: 2

Views: 3227

Answers (3)

Dasch
Dasch

Reputation: 31

I managed to do it. This is the method I used:

I applied margin 0 to the body so as to remove any borders imposed to the rest of the divs. Then I wrapped all my divs around another div and gave that parent div a width of 100% and the transparent background color and then specified the width of the content on the child div. Result is, semi transparent black background takes the full width of the page while the content stays inside that same div but with a fixed width. Like so:

#outwrap {
box-shadow: 0px 10px 10px 0px rgba(50, 50, 50, 0.75);
background: rgba(240, 240, 240, 0.6);
width: 100%; }

#content {
width: 1152px;
margin: auto;
padding: 30px;
color: #333;
font-family: Arial; }

Heres a quick demo on jsfiddle:

http://jsfiddle.net/Dasch/fK5aB/

Upvotes: 1

alessandrio
alessandrio

Reputation: 4370

body {
background-image:url(bg2.jpg);
background-repeat: no-repeat;
background-attachment:fixed;
color: white;
font-family: Arial;
font-size: 1 em;}

add

background-size:100% 100%;

and remove

background-position:center center;

Upvotes: 0

user43506
user43506

Reputation: 165

The way they do the fixed background is this:

background: url(images/Hero.jpg) no-repeat center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;

Upvotes: 0

Related Questions