?
Solved

I need to have a background color extend to entire width of monitor in bootstrap

Posted on 2014-11-07
8
Medium Priority
?
172 Views
Last Modified: 2014-11-13
However, the rest of the body of this page only fits in col-md-12, first section of a blcok of text and an image needs to be on top of this grey shade background of 320px height.  Need help laying this out.

Please see the layout in the attached tile.  The grey is the part that need to extend to screen width, col-lg-12.  The blue parts are contents.

thank you.
0
Comment
Question by:lapucca
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 4
  • 4
8 Comments
 
LVL 38

Expert Comment

by:Tom Beck
ID: 40430134
The attached file?
0
 

Author Comment

by:lapucca
ID: 40430866
Sorry about it.  Here it is.
layout.png
0
 
LVL 38

Expert Comment

by:Tom Beck
ID: 40431912
Just create a 320px tall by a few pixels wide background image for the gray and apply it to the body with repeat-x.

body { background: #ffffff url(pathToGrayBackground.png) repeat-x top left }
0
Why Off-Site Backups Are The Only Way To Go

You are probably backing up your data—but how and where? Ransomware is on the rise and there are variants that specifically target backups. Read on to discover why off-site is the way to go.

 

Author Comment

by:lapucca
ID: 40433795
The grey background doesn't start at the top of the body.  There is a logo above it that is about 88px.  How do I do this?  Also, what does that top left do?  

Thank you.
0
 
LVL 38

Expert Comment

by:Tom Beck
ID: 40434184
left top (I had it backwards) is the background position. It just means set the upper left corner of the background image to the upper left corner of the container, which in this case is the body.

When you create your background image you can leave 88px above the 320px tall gray area so you have a 408px tall image.

Or leave the background image at 320px and position it 88px down from the top.

body { background: #ffffff url(pathToGrayBackground.png) repeat-x 0 88px }
0
 

Author Comment

by:lapucca
ID: 40435330
But if I'm putting in 88px top, would it get adjusted automatically in the med, sm and xs boostrap?
0
 
LVL 38

Accepted Solution

by:
Tom Beck earned 2000 total points
ID: 40435694
No. Anytime you use a fixed height instead of a percentage of height you break the responsiveness. My suggestions were based on the information provided, 320px high gray area, 88px high logo.

Is the logo area currently responsive to changes in screen size? If so, how? If it's done using a percentage if screen height then use the same percentage for the distance from the top to start the gray background.

Is the gray area currently responsive to changes in screen size? If so, how? If it's done using a percentage if screen height then use the same percentage for the height of the gray background.

Example:

body { background: #ffffff url(pathToGrayBackground.png) repeat-x 0 10% / 100% 25% }

( background: <default color> url(<path to image>) <repeat> <left pos, top position> / <width, height> )
0
 

Author Closing Comment

by:lapucca
ID: 40440299
Thank you.
0

Featured Post

Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

This article discusses four methods for overlaying images in a container on a web page
Is your Office 365 signature not working the way you want it to? Are signature updates taking up too much of your time? Let's run through the most common problems that an IT administrator can encounter when dealing with Office 365 email signatures.
In this tutorial viewers will learn how to customize the background color and font color of highlighted text using the ::selection element in CSS Begin by defining the selected text as an element in CSS by typing "::selection": Style the ::selection…
HTML5 has deprecated a few of the older ways of showing media as well as offering up a new way to create games and animations. Audio, video, and canvas are just a few of the adjustments made between XHTML and HTML5. As we learned in our last micr…

765 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question