I have a pretty standard bootstrap layout with a fixed size container going down the page. I'm wondering, however, if there is some way of decorating the areas to the left and right of the container in order to make it look less bland, such as with background images/colors/css styling etc. I know the point of the container is to allow for responsive design, but is there a way that I can do this customization or does it go against the point of having the container in the first place?
Just apply the background color/image/ etc to the body tag like this:
body {
background-image:url(someImage.jpg);
/* other css properties */
}
The above will only affect the area outside the container div wrapping your page elements.
Add a background image to the body
body{
background: #color url(image.jpg/png) no-repeat left top; /* non repeating background */
/* background: #color url(image.jpg/png) repeat-x left top; repeating the background in a vertical direction */
}
I will also advised that the image is carefully selected to fit into your page width if you are using image. You can also remove from url... to use just color
Related
I am having difficulty tuning the placement of text on my web page. Items on the page seem to float about and not lock down. I need them to stay static with respect to the background image.
For example, I have a div Item called "leftMenu" I want the left menu to stay approximately 20 pixels to the left of the background image. Things seemed to work until I had to center the background image. Now that the background image is centered, I seem to have lost the ability to lock down div positions with respect to the background.
When the screen is full size things look good, but when the page size is altered the leftMenu drifts all over the place. I'm currently going through a lot of trial and error using absolute and relative positioning, but I can't seem to get the right combination of settings to make the item stay put irrespective of the page size.
Page: http://107.22.173.10/
user: test2
pass: abc111
Any advice would be greatly appreciated.
Instead of using a big background taking a div of text and position it absolutely to the center, why not get a div that's exactly the size of the background image and center it using:
CSS:
html, body{
height:100%;
position:relative;
}
div.siteWrapper{
background: !VALUE;/* your background*/
padding: 0 0 0 0; /* the space top, right, bottom, left from the edge of the bg image to the content box of the image*/
width: !VALUE; /* width of your background - (left + right padding)*/
margin:100px auto; /* this will center your site horizontally and move it away from the top*/
}
HTML:
<body>
<div class="siteWrapper">
//everything in here
</div>
</body>
As per your requirement acc to me you have to create a wrapper div in which your whole stuff should be present and you need to use jquery/javascript to calculate the position from top, right, left, bottom of the wrapper to make it in center of the screen. For example lightbox of jquery. because when monitor size varies then resolution changes and the position of background image change according to that but content is set according to css set on the id/class on the elements.
I was wondering if it's possible to change what file the background image repeats to when the old image runs out.
So, if image01.jpg is set as the first background-image, when it runs out vertically image02.jpq would be added as the background image to complete the page?
It might be a straight 'No', thts fine im just wondering
With CSS3 you can have multiple backgrounds. You can specify a background-repeat for each of them. It is supported by all major browsers, except IE8 and before.
http://www.css3.info/preview/multiple-backgrounds/
There's always a solution for something in CSS if you're willing to add more markup to your file. Your best bet is to wrap the element you have the first image in with a containing div with the background you would like to appear if the first image runs out. Like so:
HTML:
<div class="container"><span class="image"></span></div>
CSS:
.container {
background: transparent url(image02.jpg) 100% 0 no-repeat /* Appears on the right */
width: 200px; /* The maximum width */
/* Can also add x pixels padding to ensure that x pixels of image02 are shown */
}
.image {
background: transparent url(image01.jpg) 0 0 no-repeat; /* Appears on the left */
}
Of course you can always replace the <span> with an actual image as well.
Don't forget that HTML is an element, too.
html {/*insert tiling background image*/}
body {/*insert normal background image*/}
The body background will sit on top of the tiling html background. Works in every browser and won't require additional markup.
I have a website that one half is white and the other half it dark gray. I am using a wrapper now that gives it a defined width and centers it like this: margin: 0px auto 0px auto;.
If you look at the website here (link removed), you will see the dark bar has stopped and is confined to that width. What would be my best bet in order to achieve this?
You can look at my stylesheet here (link removed).
Thanks in advance!Coulton
To extend the dark gray background from div.right_bar all the way to the right side of the screen, you can remove the width from the parent element div.wrapper. For example:
.wrapper { width: 100%; }
When the width on div.wrapper is specified, it doesn't fill all of the horizontal space of the page, and the white from the body element shows through.
Done this a few times.
Create a LOOOONG horizontal line of that grey color as an image. Make it like 1200px wide (1px in height). Then in CSS set it as the body background with something like this:
background:url("urlToLongHorizontalLine.png") repeat-y scroll 52% 0 transparent;
the 52% will position it so that it only begins at about the center (you may have to adjust it slightly), and repeat-y will tile it vertically.
Let me know if you have any questions.
Perhaps inside your main div, create two more divs - left and right. Then in CSS define their size/position, etc.
I'd like to have separate background images on the top and bottom of my site but can't quite seem to nail it. I would like the images to stay at the absolute top and bottom of the page.Below is a shot of the site mockup, and a shot of the backgrounds on their own with dimensions.
The mockup doesn't show it, but there will be text links and copyright info at the bottom. You can find my failed attempt at coding at www[dot]dev[dot]arbitersoflight[dot]net
Mockup
img683[dot]imageshack[dot]us/img683/4502/mocky[dot]jpg
Backgrounds
img233[dot]imageshack[dot]us/img233/1293/94210454[dot]jpg
Note: The backgrounds are 1200x400 each.
EDIT: At this point I can get the two images to show up without fail, the problem is getting the bottom image to stick to the absolute bottom of the browser window. It seems that it is currently at a fixed position. Below is my CSS and HTML..
UPDATE (Solved): I finally solved this by reworking my code based on this guide: http://ryanfait.com/resources/footer-stick-to-bottom-of-page/ Thanks for all of the suggestions everybody.
You could use the second image as the body background, set a color too, and the first image as the container's background. Or vice-versa, but remember to align the background, and if you switch, mind the container's height.
The body and html background (like the suggestions from zzzzBov and nemophrost) don't work in my Firefox...
body {
background: #DDD url('2.png') no-repeat center bottom;
}
.container {
background: url('1.png') no-repeat center top;
}
Another thing you can do is set a background image on the body and on html.
body {
background: url(...);
}
html {
background: url(...);
}
You can see jqueryui.com for an example of this.
What you can do:
The menu is a div with an own background to fit the upper area.
Then apply the background with the bottom part to the body or content/page container that you are using.
It sounds like you want:
html
{
background: url(...) no-repeat top; /* see the background-position property */
}
body
{
background: url(...) no-repeat bottom;
}
you may want to switch one or both to use repeat-x, and make sure you set a suitable background color to match the color on the images.
I've been given a design for a website, and am trying to implement it.
One problem I've run into is that the design has some background images (one for the header, one for the body, and one for the footer of the site) that are wider than the main content area of the site.
Simply putting them in as background images doesn't work, since expanding the header, body and footer divs enough to accommodate the backgrounds causes horizontal scrollbars to appear if the browser window is not big enough to fully show the backgrounds.
This is undesirable since the backgrounds are not really important for viewing the website, and I don't want scrollbars to appear for them (scrollbars should only appear once the browser is too small to completely show the content of the website).
The second technique is to have a separate, absolutely positioned div to show the header background image (and put it under an element with the browser window's size), and set its width to 100% so that it never exceeds the size of the browser window (and hence create scrollbars).
This works up to a point - however, when the window is too small, the background starts shifting around relative to the content since the "top center" position of the background is relative to the browser window, not the content area. At large sizes, these are effectively the same since the content area is centered, but at small sizes, only part of the content is shown, so the center of the content and the center of the browser window are different.
A good illustration of this problem that I've found is the Quicken website: http://quicken.intuit.com/. At large sizes, its cloud background looks fine, but if you make your window's width small enough, the clouds start shifting relative to the content (bad!).
Any ideas on how to fix this so that backgrounds images
don't create scrollbars since they are not part of the content of the site
are fixed relative to the content of the site (and don't shift around at small browser window sizes)
?
An ideal solution would be something like turning overflow to hidden on the body, but only for specified divs. Unfortunately I believe this is impossible.
I'd prefer a pure html/css solution, but I accept that I may need js to get the effect I want.
Thanks! (this is a complex issue, so if any clarification is needed, let me know)
UPDATE: Fixed this by setting min-width on the background div to the width of the content.
Set the min-width on the div containing the background image to the width of the content.
You need to have your header, content & footer have a width of 100%. And put the image in as a background image in these divs ... center it horizontally.
Inside the specific divs have a wrapper that is centered. and is the width of the content of them divs.
Like so.
HTML
<div id="header">
<div class="wrapper">
...
</div>
</div>
<div id="content">
<div class="wrapper">
...
</div>
</div>
<div id="footer">
<div class="wrapper">
...
</div>
</div>
CSS
div#header {
background: url(...) 50% 0; /* to center your background image horizontally */
}
div#content {
background: url(...) 50% 0; /* to center your background image horizontally */
}
div#footer {
background: url(...) 50% 0; /* to center your background image horizontally */
}
div.wrapper {
margin: 0 auto; /* to center the div horizontally */
width: 960px; /* or however wide it should be */
}
Hope this helps.
Am I missing something, or should you be using the CSS background-image property?
I had a look at the Quicken site, and to be honest the cloud background image shifting when the browser is resized shouldn't be worried about unless your background-image is most distinctive than a bunch of clouds.
See what I mean?
You could use the overflow property and set it to hidden on the div that cause a scrollbars to appear.
I had the same issue on a site that I worked on, and come up with the following solution, which works well if all your background images are the same width.
/*
A container div that is set to the 100% width, with the overflow set to hidden.
This hides the overflowing images if the window sizes is too small
*/
#bg_container {
position:absolute;
z-index:0;
top:0px;
width:100%;
overflow:hidden;
}
/*
A div that sets the size of the content and centers itself on the page.
*/
.bg {
margin:0 auto;
width:1000px; /* content size */
overflow:visible;
}
/*
Here I set the image away from the left edge of the div to center it to the content. The actual size of the image is 1500px.
*/
.bg img {
margin-left:-250px;
}