Thanks in advance.
I'm trying to have a gradient image on the top of my page, and then another one that is on the bottom. I'm using a 1px wide image and using the repeat-x css property, so It can't just be one image. The gradients extend farther into the page than either the header or footer, so using backgrounds only for those isn't really an option. Is there a way to create a new div or have multiple backgrounds for a page?
Yes you can apply multiple background images with CSS3 but it's not recommended as browser support is sketchy. Instead use a container (such as a div) for each background image. Alternatively use img tags and absolutely position them with CSS with a z-index. Hope that helps
Related
I'm getting started with responsive design and just built this very basic "responsive" image sequence http://goo.gl/iMGRkL using the img tag.
Now I'm trying to do the same but using background-image instead of the image tag.
Is it possible without Javascript? I tried a few different approaches, including this http://goo.gl/AstSdl, but no luck so far.
Thanks in advance.
If you are using the css property "background" or "background-image", a good way to do it is to give the particular background image a parent such as a header, div, or section. Then you can use the css values "center" to center it in the parent container, and "cover" to make the image cover the parent div container. You can also play around with pixel and percentage values here. Another thing that is very important is to set the background repeat to "no-repeat" in your css so it doesn't repeat. This code will make it so that the image will cover the parent container at any width or height.
ex: background: #ffa949 url('example.jpg') no-repeat center / cover;
After doing that, the image may still looked a bit scrunched so it would probably still be a good idea to add some media queries.
i'm trying to use 2 background images on a div, im using theese style for this
background:url(../images/bg1.png),url(../images/bg2.png);
but all images are like position absolute, they are on each other so i use
background-position:0px 0px,40px 0px;
background-repeat:no-repeat,no-repeat;
when i try this 2. background dissapears, how can i fix this?
As discussed in comments, seems that the container is too narrow. It's 'disappearing' because the position is wider than the element.
I could be wrong, but I didn't know multiple background is allowed.
Since I'm assuming that you're using translucent png's, why don't just put them in 2 divs and wrap one inside another?
Alright, I am designing a website using XHTML 1.0 Strict and CSS 1,2,3. And, I have a container for the page, that contains every div within the container, I have min-height specified on the container to ensure expanding of the page.
But, I have another container within the page container that contains a content div and sidebar div and all 3 of the containers inside the content container are set to height: inherit; and all have a min-height.
On the container which includes both the content and sidebar divs, I have a background gradient image which is positioned at the top and center, but am also calling out a background color which I want to continue as a sort-of fade-out effect, which would leave the container open for page expansion.
But, the problem is, the color is not repeating all the way down within the container.
You may view the design below, it is linked with a pretty well organized External Style Sheet. As well as the HTML page being well organized.
http://www.noxinnovations.com/portfolio/kolja/
Thank you very much StackOverflow,
I hope to hear from someone very soon,
Aaron Brewer
I'm not 100% sure if i understood your problem.
But adding:
this
float: left;
to this:
#content-container
Should do the trick.
That link gave me a 404 Page not found.
Perhaps you mean that you want to stretch the background-image using css? In that case I can tell you that such a thing is impossible. You cannot stretch css background images.
Usually when you want a gradient background you make a sufficiently long gradient and fill the rest of the background with the ending color of the gradient.
CSS 3 supports defining gradients as colors. W3C working draft of gradients.
If i have a body using a background image and a div inside the body using a set background and color, how can I override the div's style to use the body's background image? I don't want to simply set the background of the div to the image as positioning of the image will be off.
I don't want to simply set the background of the div to the image as positioning of the image will be off.
You mean you want the body's actual background image to be visible (not just the URL being inherited) even though the div has a background color defined? That is not possible.
You would have to give the div a background-color: transparent to make the body's background image shine through.
The W3's background-image documentation specifies that inherit is an invalid declaration for the property.
It seems redundant to post the same information as #Pekka, but his work-around is, probably, the best non-inherit option available; although Eric Meyer's 'Complex Spiral' demo is also an option, which combines position: absolute; with multiple different versions of, essentially, the same background-image to achieve quite an impressive 'tinted/coloured' effect.
I want to make a menu with semi-transparent blurred background.
At the moment, I've only found a solution for IE: filter: blur(strength=50);.
How can I do this cross-browser, without using images?
There is no blur property in CSS, and filters are an IE-only feature. You'll have to use images.
The only way around this is to use a second, blurred version of the image and apply that as the background. You'll need to set up a common background position to line them up, e.g. using position: fixed or calculating the offset position from the top left corner of your menu.