Solved

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

Posted on 2014-11-07
8
162 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
  • 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
 

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
Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

 
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

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

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
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
In this tutorial viewers will learn how to embed custom externally-hosted Google Fonts using the Google Font API in CSS Go to the Google Fonts website at google.com/fonts: Browse or search based on font properties or name to find a suitable font for…
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).

911 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

Need Help in Real-Time?

Connect with top rated Experts

23 Experts available now in Live!

Get 1:1 Help Now