I have a page having a background image for <body>. The image may only stay bottom of the page and visible across x and I don't want it repeat whole body across x and y.
The image looks something like below;
I want this image to tile over x, but want to repeat from both sides left and right. The image may start from both left and right sides;
In between them is the content <div> By doing this, the image may be look as if it has width of whole page. I can simply do this using repeat-x, but it will create some incomplete tile portion at the end portion.
The completed page may look something like image below;
Is this possible with CSS? I think you get what I am talking about. If you want extra information, just comment.
You can write like this:
div{
background:url(image1.jpg) repeat-x bottom left,url(image1.jpg) repeat-x bottom right;
}
Related
I'm trying to get a similar background effect that's on this website:
By looking at it, the background of the website is black, but has a horizontally stretched background image that remains at the top of the page. When the page is scrolled down, the image stays at the top but blends into the background color.
I tried making an image like the one in the example and used background-size:cover but when I scroll down, the image stays static and just the contents scroll. If that makes any sense at all!!
By looking at the example, could somebody kindly explain what CSS is needed to achieve this? And also, what should the image size be (in PS), to allow it to stretch in larger browsers without losing quality?
I tried looking at the website's CSS file to see what was happening, but it's all on one line and confusing to work out.
I would add a link to the site to show how it scrolls, but apparently I'm not allowed, so a screenshot will have to do.
Many thanks in advance.
It looks like that background uses the css:
background:#000000 url(<img>) no-repeat scroll center top;
Which sets a background colour AND image, places the image statically at the top, so that after scrolling down, the background colour is only visible.
To see this effect, using chrome, change the css to:
background:#00FF00 url(<img>) no-repeat scroll center top;
and you will see what is going on.
Please refer the following links for image and diagram. Image, diagram This is the sample image. Here "Messages" title is a separate div float at left "Joe Smith and you" div is float at right. In left side all the messages are in separate divs. Now i need to change the background image on hover as shown below (like a blue arrow). The background image need to overflow from left div to right div. I tried this following code but it wont works. It get cut appropriate to the div size. I need to show the full image like in the image.
<div onmouseover="this.className='msgHover'"></div> `
above is the code on div. and my css class is
.msgHover
{
background-image: url('Images/MsgHighlight.png');
overflow:auto;
}
You can't just make the background image overflow the boundaries of the div. You can, however, make the whole div overflow it's own boundaries by using a negative right margin:
#mydiv:hover
{
margin-right: -50px;
}
This will make the entire div go wider without pushing any other elements or affecting the layout of the site what so ever. This sounds like exactly what you're trying to do. Here's an example.
Using this method you won't have to cheat using two divs in the first place and can just apply your background image on the one div.
Have a look at this example where the right margin is animated to go negative on hover.
I have a small problem on a website with a background element in CSS that doesn't go below a certain point on page. This is the link where you can see what I'm talking about, in the footer: http://www.stuffforyourdog.com/collegeadvisors/admissions.html
On other pages everything is fine, but on this one I can't figure out why the background image doesn't go all the way down, like it's supposed to.
Your background image's height is too small, if you set
.tail-top2 {
background: url(images/bg2.png) bottom repeat-x;
}
instead of top aligned, you can see that the page is too large for your image. You need to set your background image height to greater than or equal to your largest page height.
This is my site.
I want to place a customer care executive's photo in the top left of the website header which is empty now. How can I do it?
I'm not able to figure out why the graphic placed in #header isn't placed on the top-left that is there is some space on the left side.
I'd like to add the photo as separate one. If I can't then I can merge the photo along with the existing graphic header(containing company logos..).
Which will be best option?
First, the company logos image is a background, so it is not going to be affected by anything you put inside the div#header. It really doesn't need to be a background, but it's not hurting anything that way. I would remove the gradient in Photoshop and save it as a PNG with a transparent background. That will fix the issue with lining up the gradients.
As for inserting the image you can do this -
HTML -
<div id="header"><img src="path/to/executive/image.jpg" /></div>
CSS -
#header{background:url(path/to/logos/image.png) no-repeat XXXpx 0px;}
You will need to replace XXXpx with a size at least the same width or larger than the image you want to display so that the logos do not show up beneath that image.
is it possible to repeat only right side of picture. If I have a menu button picture, there are border or stripe on left side and I only want to repeat right side(without border).
When I'm just putting repeat-x scroll right or just repeat-x, the whole picture will repeat, but I only want right side to repeat, not left or whole picture.
I hope you understand what I mean.
This is button example. When my button title is too long and it will need to repeat button picture.
Can I only repeat that yellow part of picture? not together with red.
PS! Cant repeat color, because button is made with cradient.
Short answer, no, it's not possible.
A picture has fixed-width and you can't stretch just a part of it.
Solution: use two pictures, one for the left side, with fixed size and other to the right side which you can use repeat-x to fill the remaining space.
EDIT:
If your button have a horizontal gradient, the best you can do is to make a picture wide enough to encompass "almost" all cases. The key word here is almost because you can always find someone with a screen wider than the image itself.
Not sure why you can't use a solid color, but why not simply use a wider image?
just put "no-repeat top right" is that what your meaning
Smashing Magazine has an excellent tutorial on designing buttons with CSS:
http://www.smashingmagazine.com/2009/11/18/designing-css-buttons-techniques-and-resources/
Scroll down to the section "Sliding Doors: Flexible Buttons", it explains exactly what you're looking for.