Full Width background colour for Div

arbsdesign · Member · Apr 17, 2017 at 9:29 am
Copy link

Add topic to favorites
Hi

I would like to use the design technique that tints the background of a certain divs, which I managed to figure out how. The problem is that the colour doesn’t span full width. When I try and set it to full width the text/content goes full width at the same time.

Any suggestions?

Thanks

The blog I need help with is: (visible only to logged in users)
arbsdesign · Member · Apr 17, 2017 at 5:50 pm
Copy link
A good example of what I’m trying to achieve is the footer, it looks like it has a coloured background but it spans the width of the screen.
thesacredpath · Member · Apr 19, 2017 at 7:18 am
Copy link
Hi there, the following will allow you to change the background color (full width) on the white content area on all pages.
```
.home #page {
	background-color: #aaeeff;
}
```
If you wish to change the color separately on individual pages, then you would need to use the unique page id CSS class from the opening body html tag on each page. As an example, this would change the color on your about page.
```
.page-id-2 #page {
	background-color: #ffe5aa;
}
```
When you inspect a page, this is what you would see (example of your home page.
<body class="home page-template page-template-template-full page-template-template-full-php page page-id-63...
page-id-63
is the unique page id CSS class for your home page. In the CSS, since it is a CSS class, you would precede it with a period ( . ) using the above code as an example.
arbsdesign · Member · Apr 19, 2017 at 7:58 pm
Copy link
Hi @thesacredpath, thanks for getting back to me!

That works changing the colour of the entire page, however I would like to just change the background colour of individual divs. the following code achieves what I want, changing the background colour for one of my divs, but it is not full width, any ideas? I tried adding width: 100% and that messes with the actual alignment of my div content

.homesixicons {
background-color: #aaeeff;
}

Thanks!!
dcoleonline · Staff · Apr 19, 2017 at 11:05 pm
Copy link
Hi @arbsdesign,

A good example of what I’m trying to achieve is the footer, it looks like it has a coloured background but it spans the width of the screen.

The reason the footer can do this is because it doesn’t live inside of the same container that holds the page content above it.

The container that holds your content has a max-width on it to keep things centered, and to keep the length of your lines of text easily readable. It also prevents any content (even backgrounds) from reaching the left/right edges of the screen. As you’ve seen, adjusting the max-width on the container that holds your content can really make a mess of the content layout.

The footer, however, has no restrictions on how wide it can go, and therefore the background color is free to fill the footer div, which reaches the full left/right edges of the page.

If you’d like to create a background that stretches the available width of the content area (like the background of your testimonials), that can be done. You’ll just need to put a div around all of your .homesixicons divs, and style that container with it’s own background.

If you want do to that, something like this should work:
```
.your-container-div {
    background-color: #000000;
    display: inline-block;
    width: 100%;
}
```

No items found.