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?
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.
This is my problem:
http://jsfiddle.net/pbgLc/
I need the background image (with url) to be placed at the top left position of the image, and want the text to be moved next to the background image.
As you've probably noticed I'm using two backgrounds, so its probably not possible to use just one div, right?
Have you guys any solutions for that?
I don't know if this is exactly what you are looking for, but you can have 2 background elements at the same time, as long as they don't conflict each other. http://jsfiddle.net/pbgLc/5/
Maybe this can help a little? CSS background-position Property
If you want the image and the text next to each other, why don't you put them litterly next to each other?
2 divs inside 1 div
Or am I misunderstanding you?
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
I am trying to just create a basic layout, but i am having trouble to get it to auto-adjust the height.
Something is wrong with the DIV-container since it's not adding the padding correctly to the top and bottom elements. It should be the size of the highest block, right now its the menu block.
Any ideas?
Website
in the container that holds your divs (the one whose height is not adjusting), use a css clear fix. Your container div will adjust once you use this method.
Add overflow: hidden; to the CSS for that particular <div>.
Inspect your HTML by using Google Chrome or Firefox with the firebug addon. Is so easy to see where and where not there is correct padding, margins etc... Additional ye see all css for a selected element as well...
Btw. When you are using padding, are you sure the rows above and below are cleared ?
Tried using margins instead?
I'm trying to use two divs, one with a non repeating background in the left corner to serve as a 'curved border' image, and the second div, within that one, with a background that is offset by the width of the first div's image so that it seems to be one solid image, that fluidly stretches with the page width. I tried doing this the way I described but it isn't working, only the stretched repeating background div shows up. I would prefer to try from scratch something one of you suggests.
Try setting an explicit widh on the left div, and try using float:left on both (to make sure they align properly).
And set border:none (I'm stating the obvious here, probably).