There is a black space where the IOS status bar is. I cannot figure out how to get that space to fill up using CSS.
Here [1] is a screenshot of how it looks on an iPhone when the webpage is loaded.
The status bar space does not inherit/match the background image or the background color.
This is the code down below that I have for the background image.
body{
font-family: 'Inconsolata', monospace;
background: url("./Components/Images/back.png");
background-repeat: no-repeat;
background-size: cover;
position: relative;
} ```
[1]: https://i.stack.imgur.com/y3Lwp.jpg
https://www.youtube.com/watch?v=plOl7TNc89A
I'm not sure what your exact issue is since you didn't provide a working example (please update if this doesn't solve it), but it sounds a lot like the issue desribed in the video above. tl;dr is that images are inline elements by default and they put a default buffer below them to allow them to line up with the main parts of a line of text and not the parts of text that drop below the line on which text is written. To fix this, you can override the default display and use
display: block
for your individual img element to remove space below the image.
Some other problems could be the presence of margin or padding on your element (set those to 0, if needed) or the way the image is saved. Re-save the image from your image software using save as an not as save for web.
also, I'm not sure what your exact issue is but if it is concerned with the default spaces in css please add
*
{
box-sizing:border-box;
padding:0;
margin:0;
}
to reset default properties I hope this helps
Related
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 website (click) should look like this website here (click) for the most part. The first link is in BVCommerce cart, the second was the initially designed HTML and CSS. You'll notice on the first link the center content is slightly off center as well as missing the background with the shadow, which is my main issue. (The image that should be showing up is images/bg.png)
There are a few bugs with the first website but I'm really just trying to get this background to show up properly.
First website CSS: justicejewelers.com/css/styles.css
Second Website CSS: justicejewelers.rcmhosting.com/css/styles.css
First Website Image: justicejewelers.com/images/bg.png
Second Website Image: justicejewelers.rcmhosting.com/images/bg.png
UPDATE
I've combined the bar and background gif to save some heartache. But any ideas on how to get the whole center area shifted to the right properly?
I do not know about your main issue, but on the first page I would change the text inside the head. Search robots such as Google will often ignore pages with too much information in the head due to spam protection.
I believe you have something like this in the CSS:
.wrapper { background: url("images/bg2.gif") repeat-y scroll center top transparent; padding-top: 0; }
and it overrides this:
.wrapper {
background: url("../images/bg.png") repeat-y scroll center top transparent;
padding-top: 0;
}
About background error, Firebug shows no-repeat :
/BVModules/Themes/Painted%20Paper/styles/styles.css :
url("../images/bg.png") no-repeat scroll left top transparent;
Also, your #maincontent div is smaller than the width of the background image (you have no padding in the first website (1016 pixels versus 960 pixels)
I guess you should remove /BVModules/Themes/Painted%20Paper/styles/styles.css CSS link
and give a try to a helper like Firebug :)
How can I do to have an image as the background for all links? I want to have a nice box representing buttons, but I cannot figure this out.
I have tried:
a {
font-size: 40px;
background: url('images/shooting-stars/shooting-star-link.png') no-repeat left top;
}
But this is not working, image is not displaying.
"I want to have a nice box representing buttons, but I cannot figure this out." - I don't understand this part.
Anyway, your css looks fine from here, are you sure the image exists? This is a working example with the exact same code, just an image that I'm sure exists:
http://jsfiddle.net/3k9nm/
If you want to always show the image, even if the text is shorter, you should set a minimum width for the links. This does mean they'll have to be inline-blocks, you can't set width on a regular link (which is an inline element).
a {
display: inline-block;
min-width: 25px;
}
(25px was randomly chosen, fill in the width of your background image..)
Two things to try, is there any text in the actual <a> links? And if you use Firebug, you can check you've definitely got the right file path to the image...
HTML
<div id="example-link">
Link to journal article
</div>
CSS
#example-link a {
background: url('images/shooting-stars/shooting-star-link.png');
}
i have this image in the background:
http://yoursdproperty.com/templates/pjo_joomlaforall/images/bgr.png
of this page:
http://yoursdproperty.com/index.php?option=com_jumi&fileid=8&Itemid=34
how do i remove it?
i understand that if i remove it the page will just be white in the background correct? if not, what do i need to do to get rid of the gray and white and just make it white?
If you change the following style you should get what you want:
#background_right {
/*background:transparent url(../images/bgr.png) no-repeat fixed center top;*/
background-color:white;
margin:0;
padding:0;
}
Just remove or outcomment the particular CSS line responsible for this. Or am I thinking too simple about this problem? If so, then please elaborate more about the context of the problem. If it is for instance an autogenerated stylesheet which you don't have control over, then best what you can do is to grab JavaScript (jQuery?) to remove/override the background image in the particular style class.
Edit: if you rather want a white background, then you'll need to get rid of the .body_background class as well.