I am trying to use a image to set the background but when I put in my code I end up with multiply images instead of one whole image, I can't post a picture but here is the code i used in the CSS:
body { background-image:url(../images/kw4.jpeg);}
Am not sure what I am doing wrong?
If you mean multiple copies of the same image all over the page, then that is not actually a bug. When you specify a background image in CSS, your browser will automatically fill the page by tiling the same image over and over.
To prevent this from happening, add
background-repeat: no-repeat; to your CSS. This will render the image only once.
Try:
body { background:url(../images/kw4.jpeg) no-repeat;}
Related
I want to make login form using hmtl , css and one function with javascript, but when i add image url to my body class in css i get displayed few images instead of one that fits the whole screen size.
Any solution?
[enter image description here][1]
how are you adding the image, with background-image?
You could try to add also background-size: cover, which will scale the image (while preserving its ratio) to the smallest possible size to fill the whole container.
example
body {
background-image: ...
background-size: cover;
}
You can read more about it here
I have noticed that Facebook and Instagram uses the same way of displaying icons found on the site, which is to add into a single PNG file all the icons and make the styling based on their position?
Please have a look on the Instagram way of doing it.
I understand that in this way, the client will receive only a single image which will be cached and the user performance will increase. But how do they do it?
Thank you for your time!
They do it by making a div or span or whatever, with a background of that image and then change the background position.
Example
.icons {
height:20px;
width: 20px;
background-image: url("path/to/image");
}
.icon1{
background-position: 0 0
}
.icon2{
background-position: 30px 0
}
JSFiddle: https://jsfiddle.net/qxjyycv2/
What you're looking for is Image Sprites.
The div you are displaying the image in (always as a background image) is set to overflow: hidden; while the background position changes to display the correct part of the sprite.
https://www.w3schools.com/css/css_image_sprites.asp
You can use this tool to generate CSS Sprites(one single png image) from your multiple images along with their css:
CSS SPRITE GENERATOR
I'm working with the Shape5.com Corporate Response Joomla template and been asked to make a change to the color of the four icons for social media in the upper right-hand corner. The demo of this template can be found here:
http://www.shape5.com/demo/corporate_response/
Their CSS for each icon looks like this from the template.css file. I'm just including the first icon to keep this brief, which is for RSS:
#s5_rss {
height:23px;
width:22px;
background:url(../images/rss.png) no-repeat top left;
cursor:pointer;
margin-left:8px;
float:right;
}
#s5_rss:hover {
background:url(../images/rss.png) no-repeat bottom left;
}
The rss.png is here:
http://www.shape5.com/demo/corporate_response/templates/corporate_response/images/rss.png
I've been asked to use CSS to change the active/hover color from what it is now to red. I'm not sure if this can be done with CSS or not. Can it? Or does this require a new .png file created with the image by the designer to be the desired red color?
I'd also like to understand why this rss.png file has two images of the icon inside of it at different shades and how does the CSS toggle between them to know which to use for hover? Is this a special .png file that allows this, perhaps in a different format than most .png files? Thanks!
The image is known as a sprite image: a single image file consisting of multiple sprites which you apply as a single background image, and position according to the constraints set by the width and height properties on an element. It's just a regular PNG image and is not intrinsically different from other PNG images.
As for actually changing the color of the image to red, that is not something you can do with CSS alone depending on what you mean by "changing the color" — the safest bet is to modify the image to add a new sprite with the desired color. Since it's just a regular PNG image it's a simple matter of extending the canvas another 23 pixels down, rendering the new sprite in the extra space that's created, and modifying your CSS so it looks like this:
#s5_rss:hover {
background:url(../images/rss.png) no-repeat center left;
}
#s5_rss:active {
background:url(../images/rss.png) no-repeat bottom left;
}
You can also replace the background:url(../images/rss.png) no-repeat portion with background-position: in your :hover and :active rules as you're really only modifying the background position when using a sprite in CSS:
#s5_rss:hover {
background-position:center left;
}
#s5_rss:active {
background-position:bottom left;
}
Experimental CSS filters are up around the horizon, but without good cross-browser support, you're basically out of luck on that front. If you can handle reduced browser support, go take a look at this overview of CSS filters.
Your current code shows only half the rss.png which conveniently is the exact height of just one of the sub-images within it. When you declare the background: you're telling it to stick the image from the top and hide the bottom half.
On hover, you're instructing it to draw just the bottom half of the image (the hovered state part). To make it a different color, you pretty much need to edit the file (short of having the background image partially transparent and showing a red background through it).
Overall, there's nothing magical going on, just well-documented magic that we all share and use every day.
Currently there is no way to change the colours within an image using css and likely there will either never be or a long way off. There is the potential to do a color overlay but this would not help unless the image you were dealing with was a block colour.
In order to change the color you will need a separate image to reference on the hover styling rule for that element.
The alternative way to do this is to use a sprite, where all the images are loaded as one image and css just focuses on a portion of it depending on the state ie hover, active etc. This is what you mentioned earlier. Have a look at the following links for information on using a sprite, but put simply if you have a 40*40px social icon. You would create a 40*80 image and then in css say use the top half for normal and the bottom for hover. This actually saves time when loading your page and you should always try and use sprites where ever possible, remember the faster the page the better for the user.
http://css-tricks.com/css-sprites/ (good guide on sprites)
http://spriteme.org/ (very handy and will do the work for you - recommended)
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.
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?