I have a a background image on my html with css page, from blue at the top, to white at the bottom.
However, the image 400x800 and the page is much longer, so it repeats.
The page length varies all the time.
Is it possible to solve this so the background stretches to the page length somehow? or maye make it not repeat and make the background white with the image on top?
If yes, how please?
The easiest is to set the image to not repeat and then set the background color the same as one end of the gradient:
body {
background: white url('yourImage') repeat-x top left;
}
Getting a gradient to stretch to fit the window is doable, but is more work and would require some javascript.
I know that there are jQuery / Javascript methods of accomplishing this:
Resizable Backgrounds with jQuery
Stretch background image - jQuery - Demo
but besides resorting to solutions like those - you could:
Select a pattern for your background that repeats (textures etc.)
Create a very long background image that could handle most navigation that your page
would deal with.
Another alternative is to make your gradient the same at both ends with the maximum colour difference at the 50% mark.
Related
i've been trying to find the name of this but i have no clue on how is this called and made.I have been coding a html website and i wanted to do some experimenting with the background that there is Content on a white background(the white background is small just to cover the content not a main background) and behind it, is the background image. Check steam profile backgrounds everything is on the blue/black background and the games bgs are behind.
Sorry for my bad english.
I think to have understood your questione, in css make the body, or a background DIV height and width :100% than set the background-image: imagepath;
Now your should have the background.
than create a div, in CSS make it position: relative; height and width the size do your preferenze than to have it centered use matgin:auto; and to have only the background of the div look semi trasparente use a background-color:rgba(255,255,255,0.8)
I hope to have answered your question.
PS if your need to get started try Code accademy.
I want the background to be displayed from the line drawn on the screenshot:
http://img29.imageshack.us/img29/4707/wjm7.png
I tried to use
background : ('path/to/image') 0 650px repeat-y
But it the light part of the image moves and it looks ugly. All I want is simply to background look on the site like on the screenshot, but without the dark part in the bottom. Thats why I want it to repeat from the red line.
Now the css is this way:
background : url('path/to/image') top center
You can set px values instead of top
background : url('path/to/image') -430px center;
Repeating the background like this will not be possible. You'll just have to crop your image and use repeat
I'll suggest to use two backgrounds. I.e. set the repeatable part as a background of the body and the other part as a background of your main container.
I have a page with a large background image. The menu and main content portions are 900px and centered. Rather than just fill the menu background with a color, I'd like to simply blur the background image. I'd also like the blurred part to move appropriately when the page is resized so I can't just blur a section of the background. How is the best way to achieve this? I tried putting a semi-transparent .png as the background to my menu div but that didn't work, I didn't see any effect. Does anyone know how to do this? Thanks.
The site that inspired the question is this one: http://www.bluespooncoffee.com
http://jsfiddle.net/MAbpx/
background: rgba(255,255,255,0.5);
This makes the background of something semi transparent because the last value is the alpha (transparency value). Adjust as needed.
How can I make all my pages have the same background feeling as my homepage. For example if you see this page you can see the background is out of place. Let me know if you want me to send you the code but pretty much you can see it at these pages. Thanks a lot!
PS: Any other way besides using position fixed?
Try a different approach... Instead of using 2 different gradients in two different div's (#hhbg and #footer), just combine the two gradients into one image and apply it as a background to, for example, body. Then use background-position to anchor the image to the bottom corner and repeat it horizontally.
I'm sure it's just simple html/css but I don't know what to call the bar (googling horizontal bar html always results in a horizontal rule).
http://jquery.com/ has one - the grayish bar the runs across the top separating the menu from the content of the page. I'd love to make one of my own.
There is a number of ways to do this.
On jquery.com it is part of background image applied the body tag.
You can have a header section which has background aligned to the bottom as an image and bottom padding that prevents text/content from overlaying that part. Finally you could use thick border if you want to just have plain color. I am sure there are numerous other ways to do this as well.
Easiest solution:
<!-- content above bar goes here -->
<div style="height:30px;background-color:lightgray;clear:both;" ></div>
<!-- content below bar goes here -->
You do the clear:both just in case you're floating elements that you want to keep above the bar.
The best way (in my opinion) is the page background image method, if your design is static enough. Otherwise, create a div with the correct height, set its background image to a very thin (1 or 2 pixel) image with the correct height/color/gradient properties, and tile it across the x axis.
I would avoid the thick border method, as that might render differently on different browsers.
Its a BG image that's applied to the body tag.
body {
background: #2a3139 url(../images/bg_home_tile_sml.jpg) repeat-x 50% 0;
}
IMO it's the best way to achieve this effect.