Solved

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

Posted on 2014-11-07
8
170 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
Independent Software Vendors: 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!

 

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 500 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

CSS is a visual language used to classify objects and define rules about how they should be displayed. CSS skills aren’t restricted to developers anymore, there is a big benefit to having a basic understanding of the language, regardless of your occ…
When crafting your “Why Us” page, there are a plethora of pitfalls to avoid. Follow these five tips, and you’ll be well on your way to creating an effective page.
The viewer will the learn the benefit of plain text editors and code an HTML5 based template for use in further tutorials.
Learn how to create flexible layouts using relative units in CSS.  New relative units added in CSS3 include vw(viewports width), vh(viewports height), vmin(minimum of viewports height and width), and vmax (maximum of viewports height and width).

724 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