Really new to CSS here...
I'm trying to resize with CSS the background image to fit the header.
So far I've tried wrapping the image itself with a div class to try to manipulate it... to no avail!
HTML:
{block:ShowHeaderImage}<div class="header-image"><img src="{HeaderImage}" alt=""></div>{/block:ShowHeaderImage}
CSS:
.header-image {
position: absolute;
background-size: contain;
background-position: -1;
opacity: .05;
background-image: url({HeaderImage});
}
There are other elements in the header, hence the background-position.
I've successfully gotten it to resize by putting the background image in the parent class -- however then the header image is not toggleable via the {block:ShowHeaderImage} function, nor can I change the opacity of JUST the background image as far as I know.
I'm probably making a few mistakes here but the end goal is to have it resizeable and toggling using Tumblr's syntax.
Custom Images
You can check if a custom image has been uploaded, using an if operator:
{block:IfHeaderImage}<div class="header-image"><img src="{HeaderImage}" alt=""></div>{/block:IfHeaderImage}
Custom Text
You can use custom text to provide a value for the opacity:
<meta name="text:Header Opacity" content="0.5"/>
.header-image {
opacity: {text:Header Opacity};
background-image: url({HeaderImage});
}
References
Theme Options - https://www.tumblr.com/docs/en/custom_themes#theme-options
Related
I was wondering if it is possible to : when hovering over a toggle menu (has ID 9) in Wordpress to display an hidden image (Lets say has ID 10). It looks like this now https://wortelboeryachting.com/wp-content/uploads/2020/04/Screenshot-2020-04-29-at-20.29.36.png. I want to be able to hover over the toggle menu on the left and make an image, currently hidden behind image on the right, to appear. If possible in CSS addition code because I am not very familiar with JavaScript.
Thanks for the help!
If you only want to use CSS, you can put the images into pseudo-elements of the menu items. Only to show you the concept:
.myMenuItems::after {
width: 100px;
height: 100px;
background-image: url('yourimagepath');
background-size: cover;
opacity: 0;
}
#myMenuItem:hover::after {
opacity: 1;
}
Of course you can use a class and it may better to position the image absolute.
If you want to overlay as you said, you can make this happen with the css property "z-index", instead of "opacity".
I found some icons on Flaticon.com to use them in the navigation menu of my blog. In this case I wanted to replace the text "Home" with a house icon using the Base64 code.
This is the current code that was used on my site:
.menu-item-36 {
content: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAABHNC…ToDCG0DxpgvOsX4GsAgGyBKX8AAAAASUVORK5CYII5467651096249186f76b4680bd54615d');
margin-left: 10px;
height: 40px;
}
I changed background-image to content in order to hide the original text 'Home' and replace it with the icon.
Now the problem: When I use the code above, the icon has a black color. I would like to use a white color instead. When I set the class to color: #fff; or fill: #fff; it doesn't work.
How can I this issue?
To hide the text, you should not change the background css property to content. I don't know iff you should even use content for anything else then the ::before and ::after psuedo elements.
But for your questions:
To hide text, you should use one of the possibilities given in this answer:
https://stackoverflow.com/a/471538/2012433
To make your image white, there is a hacky solution, namely using this css:
-webkit-filter: invert(100%);
filter: invert(100%);
But better would be to download the image and edit it to white. Then get the base64 code at for example http://www.base64-image.de/
Finally when you set that image as background-image, the following css will fit it nicely in your menu:
background-size: contain;
background-position: center;
I am using blogger and recently inserted this cc code in to the advanced section of the template designer to input a background image
body {
background: url(http://img854.imageshack.us/img854/9854/ied6.jpg) no-repeat;
background-attachment:fixed;
background-color: none;
}
.body-fauxcolumn-outer div {
background: none !important;
}
The problem is that when the browser window is resized the background stays the same but all the widgets/elements on the page resize along with the window.
See www.ashlylondon.blogspot.com
I need the background to resize along with the widgets so that they stay in the white area on the background image.
You are relying on background resizing so much that your layout won't work without it. That's not ideal. The typical approach to a situation like this would be:
Have a background image that covers the entire screen
Give the <div> element that contains the actual content a background-color: white property.
You can still use background-size to scale your background image to the screen size, but it no longer is necessary for the layout to work.
this woul make sure your content is always readable no matter what; it'll work where background-size won't, e.g. in older browsers and some mobile devices.
add this to your css
body{background-size:100%;}
try this
add in body class background-size:cover;
http://jsfiddle.net/pyFbF/3/
body {
background: url(http://img854.imageshack.us/img854/9854/ied6.jpg) no-repeat;
background-attachment:fixed;
background-color: none;
background-size:cover;
}
.body-fauxcolumn-outer div {
background: none !important;
}
Is it possible to use CSS sprites for "foreground" images -- i.e. images that users are supposed to click on and interact with and maybe even print?
Instead of using the CSS background-image property. What would you use?
You can use a standard <img /> tag and put it in a container (like a <div />) with a limited height/width. Then use relative positioning or negative margins to control the position of the image.
I have solved this problem using img tags and using the object-fit and object-position properties in my css. Here's a sample of the html and css I used:-
HTML
<img src="<your image source>" class="sprite-icon sprite-icon-1 " />
CSS
.sprite-icon {
height: 20px;
width: 20px;
object-fit: none;
}
.sprite-icon-1 {
object-position: 0 0;
}
.sprite-icon-2 {
object-position: -20px 0;
}
Obviously, you need to change the position and the size parameters according to the sprite you are using. For a full working example, check out this fiddle
You can do this with less CSS like this:
.myClass { background: url(../Images/Sprite.png) no-repeat;
height: 20px;
width: 40px;
background-position: -40px 0;
display: block; }
.myClass:hover { background-position: -40px -20px; }
Whatever has the class class="myClass" will have just the image in it, nothing else. This can be a <a> an <input> or a normal <div>, whatever you want.
It's a background image...but it's the element you're looking at, nothing's in front of that background. Just because you're using background-image for the property doesn't mean it's not a foreground element...like a button you can click on. You can do that like this:
<input type="button" class="myClass" />
One primary requirement that cannot be handled by background images is for ARIA. All ARIA requirements will reject the use of background images for meaningful, navigational, and other 'informative' uses that a screen reader must interpret on behalf of a user with a disability. Being able to swap out a background image css statement for an img tag and some ARIA tagging whenever necessary is a critical feature in the current regulated development environment.
The answer to the original question is yes! It is possible to use the image that is displayed in a css background statement. But you must open the sprite image in an image editor and select out the portion that represents the sprite you want and save it as a separate image and reference it in an img tag.
The challenge is that often, these situations arise in a pre-built control library. Finding and altering the code in the library that selects and displays the background image is a little difficult, changing out the code is hard!
#Waughwaugh's answer https://stackoverflow.com/a/50715682/2733244 using object-fit and object-position is a simple and solid solution for this problem. Its only downside is that it won't support some older browsers. If you still need to target IE11 you can instead work with clip-path and negative margins:
.sprite {
width: 240px;
height: 20px;
}
.sprite-1 {
clip-path: polygon(60px 0, 80px 0, 80px 20px, 60px 20px);
margin-left: -60px;
margin-right: -160px;
}
Full demo: https://jsfiddle.net/wortwart/8omfcyxb/10/
Using "real" images instead of background is often semantically better (e.g. for icons) and can have benefits for accessibility: If the image has not loaded or was blocked by the user we still have <img>'s built-in alt description. Accessibility is more than just screenreaders ...
The best approach of course is to ditch CSS sprites and simply load the images separately with HTTP/2.
You can do this, but you have to use background images for sprites as you have to be able to set position. This can be used for links or whatever you want. Look at Googles sprite, they use it for there buttons on iGoogle: http://img0.gmodules.com/ig/images/v2/sprite0_classic.gif
I am familiar with CSS techniques to replace text with an image. For example, here are 9 of them: http://css-tricks.com/nine-techniques-for-css-image-replacement/
Are there any techniques for replacing images? Is there anyway to set the background of an image to an image and then hide or move the foreground of the image (the image src element).
I am trying to write a skin for a site that has an image that I want to replace. Thanks.
From how I understand it he's trying to do this in pure CSS, with no changes to HTML or JavaScript.
That is correct. I am adding a new stylesheet to an existing page. Let say I can not modify HTML or utilize javascript.
After a little bit of tinkering, I figured it out!
img.someclass {
background: url("NEW IMAGE URL") top right;
height: 0;
width: 0;
padding: 200px 550px 0 0; /* Insert actual image size (height width 0 0) */
}
This will make the height and width of the actual image 0, but will expand the box to fill the size of the image with padding. The only downside to this is it won't look perfect in older versions of Internet Explorer.
If you have an element surrounding the image, e.g. a DIV, you should be able to set a background image (along with no-repeat and a position) on it, then set the image to display:none.
Alternatively, here's a haphazard solution that seems to work. It positions the image off-screen, then uses the :after pseudo-element to set a background image. It should be workable, but you'll need to fiddle with the values to get it working right. It won't work in IE6 though.
<style>
img.test {
background: url('image_to_show.png') no-repeat right top;
position: relative;
left: -16000px;
}
img.test:after {
content: ".";
color: transparent;
display: block;
width: 16000px;
}
</style>
<img class="test" src="image_to_hide.png">
The best way to replace images is to set the background position. First create the two different images and put them one above the other in the same image. Say your skin element is 50x50 pixels, you'd create a 50x100 image.
Then use some code like this:
.skinElement1 {
background: #fff url("image.png") no-repeat 0 0;
}
.skinElement2 {
background: #fff url("image.png") no-repeat 0 -50px;
}
So to view the second image you move the background up by the required amount. You could either use javascript or your server-side code to set the appropriate class.
Maybe you can set an opacity of an element and then set the background to the image you want.
Musicfreak: I meant using TWO elements.
you will have assign different classes for the two states then write some javascript to have the image change upon an event.
for example:
.firsImage { background:transparent url(/images/someImage.jpg) no-repeat; }
.secondIMage { background:transparent url(/images/image2.jpg) no-repeat; }
HTML:
<div id="imageDiv" class="firstImage"> some content </div>
<a onclick="changeImage()">Change the image!</a>
Javascript:
function changeImage(){
var imageDiv = document.getElementById("imageDiv")
if ( imageDiv.className === "firsImage" )
document.getElementById("imageDiv").className = "secondImage"
else
document.getElementById("imageDiv").className = "firstImage"
}