I am wondering if anyone knows how to achieve the following - take a look at http://www.dspts.si
The first 1/3rd of the screen has an empty background and from there onwards there should be a pattern repeating. I did it right now, by creating a very long pattern png and set it to offset 300 and repeat-x. However, I'm not happy with this solution because it will break if the pages ever get longer than the background image png is.
Thanks for any suggestions!
Put the repeating pattern as background to html element, then a white 1px * 300px image as an background image to body element, and you're all set.
html, body {
height: 100%;
}
html {
background: url(dotted.png);
}
body {
background: url(white_1x300.png) 0 0 repeat-x;
}
You don't have to use html and body tags for this, but it's the easiest way and doesn't require any new markup.
You can specify multiple backgrounds. See Can I have multiple background images using CSS?. The techniques mentioned there are:
Put the whole page into another <div> container or misuse the <html> tag for it.
This means you specify a background for <body> and one for <html>.
Use CSS3 which support multiple background images. That's not yet supported by all common browsers.
Yes, specify your background image as normal but set the background-position like this:
background-position:0 300px;
This will make the background image start at 0px from the left, and 300px from the top.
Let's not forget that you can use FireBug with FireFox to easily diagnose techniques on websites.
Related
I got an Image which is 400px x 685px. In the website, i set it will only show 200px x 685px. I want to know how to show the whole image when the mouse hover the image and show another half of the image 200px x 685px to 400px x 685px? Thank you
So I think a part of your css may looks like:
.your-class {
background: url("[the path of your image]");
background-size: 200px 685px;
}
then for when the mouse hover the image:
.your-class:hover {
background-size: 400px 685px;
}
Note that if you're using the <img> tag itself in your .html file, then you should write width and height instead of background-size. Anyway The code above is somehow what developers do in css in this case. But obviously it really depends on how you've structured your HTML with div tags and also the classes you've given to these tags.
you achieve by set
.selector:hover
{
background-size: 100% 100%;
}
I think an acceptable solution would be to create a div in your html. In your style sheet (aka - css file) you should define it with width:200px, height:685px; the next thing you want to do is to set all divs tags (or any id you give this fella) a background-image:url("whatever.png");
Now, you should also use the background-position:right (or left, your choice).
whta will happen so far? Your div will show half an image.
Now you should use div:hover as a new set of rules in your css, and there also use the background-position:left/right (the one you didnt use).
Tell me if it works.
I have seen a website using google chrome that they put the CSS Background Property in the HTML tag like this:
html { background: #eee url('../img/bg.jpg') center center repeat fixed; }
Is it ok to do that or should i put it in the body?
It doesn't really matter on which you put the background, both work equally good, but there is a gotcha.
If you put the background on BODY only, the background will stretch the whole height of the screen, even if there's no content on the page, but if you put it on both HTML and BODY, the background on BODY will only be as high as your content inside it, just like on any DIV.
I often use backgrounds on both when there's a need for two background images as this eliminates the need for unnecessary DIV wrappers.
lea.verou.me puts it on the html tag. If it's good enough for her, then it's good enough for you. ;)
You might want to throw height: 100%; in there too.
I would suggest putting a page wide background image on the body tag.
<body>
And in your style sheet you can then specify a background
body
{
background-image:url('blah.jpg');
}
This is my issue.
I have a menu using an image sprite, the image has transparencies, but when I add a :hover, it works, but I am still able to see the original image at the end.
Is there a way to make the hover show the image that I want and REPLACE the original one?
Thanks,
Marco
You can replace an image by using it as a background-image instead of using the <img> tag.
But most of the times, this is slow and another way is maybe good practice:
Create an image that has the :hover image next to it [img|hoverImg]
Do a styling with background-position to change the background.
Like this:
.menuItem
{
background-image: url('hello.jpg');
width:100px;
height:30px;
}
.menuItem:hover
{
background-position: 100px; /* Or whatever measure your image is */
}
The problem with this, is that the image size is fixed. You really have to specify it, instead of just doing this with an image.
I like this as the best way. If you want to set the src in your <img>, this can be done with Javascript, but is much heavier most of the time, because you have to load an extra image from the server.
Hi I have a 1px png file,which I am trying to set as a background image for two divs which are adjacent to each other horizontally.The html and css are as under:-
<div id='one'>hi</div>
<div id='two'>hello</div>
The css is like this
div {
width: 50%;
height: 50%
}
#one, #two {
background-image: url(/images/image.png);
background-repeat: repeat;
}
Now the problem here is in between the two divs a black border automaticaly appears when the image is set. I dont want the two divs to be seen as separate blocks.Please help. Am totally new to css and need help:-)!
I'd be willing to bet that the image you are using has alpha transparency (that is, the image is partially transparent), and what you're seeing is a one-pixel overlap between the two divs. Either make sure that the container is an even number of pixels wide, or put the divs inside another container and use the background on that instead.
like robert, i'm also not getting the border, but i do get some repeats.
see if this works for you:
#one, #two{
background-image:url(99785.jpg);
background-repeat: no-repeat;
borders: 0
}
The problem is caused by a couple of interacting things.
First, make sure you are using the html strict doctype. This will help mitigate a lot of the formatting issues between browsers around divs. See alistapart for a description and list of real doctypes to use and quirksmode for a detailed comparison of them.
Second, you will more than likely have to set the margin of your divs to 0. Browsers have different default settings. A strict doctype will alleviate most of this, but there are usually other areas you have to overcome as well.
Also, you might want to grab firebug for firefox and leverage chromes dev tools. firebug will actually show you what all of the margins / padding / everything else is being set to. The Chrome tools don't give you a pretty picture with the details but you can see what the margins/padding/etc are in the Computed Style section.
I'm specifying a color hex code as the background-color of a really long div. However, i'd like this color to be only repeated horizontally, from left to right, in the first part of the and not go down any further.
Can that be done using background-repeat:repeat-y or is there another method?
Colors have no height...they just exist, without dimensions. If you want a visual distinction between your background color and the rest of the document, you'll need to use a solid image as your background-image:
div.className {
background-image:url("images/background.jpg");
background-position:left top;
background-repeat:repeat-x; // Causes repeat from left-to-right only
}
Do you mean repeating background color or an image? I assume an image becaues repeating a background color makes no sense. And yes this is the correct way:
#mydiv {
background-image: url(images/background.png);
background-repeat: repeat-x;
}
The background-repeat CSS property defines how background images are repeated. A background image can be repeated along the horizontal axis, the vertical axis, both, or not repeated at all. When the repetition of the image tiles doesn't let them exactly cover the background, the way adjustments are done can be controlled by the author: by default, the last image is clipped, but the different tiles can instead be re-sized, or space can be inserted between the tiles.
http://www.handycss.com/how/how-to-repeat-a-background-image-horizontally-with-css/
You can achieve this without a file when creating an 1px image and put it into your CSS encoded as base64, or by using multiple html elements and positioning. You can not specify a background size for a plain color defined in pure CSS (without using the image trick) at this time.
Also see Is embedding background image data into CSS as Base64 good or bad practice?