Was try to make a background image clickable. I used the follow: as html code and the following:
#range-logo {
background-image:url(http://midwaycinema7.com/wp-content/uploads/2015/12/home-specialism-section-2.jpg);
display:block;
height:600px;
width:1240px;
}
as CSS code.
I was able to achieve making the background image clickable but the image in repeated which is not what I wanted. I want the image be full screen without repeating on any device (responsive). A code to achieve that will be helpful . Thanks in advance.
JSFiddle: https://jsfiddle.net/qfpqdzk2/
PS: Trying to implement this on wordpress.
please check this link: https://ran.ge/2009/11/11/css-trick-turning-a-background-image-into-a-clickable-link/
#range-logo {
background-image:url(http://midwaycinema7.com/wp-content/uploads/2015/12/home-specialism-section-2.jpg);
display:block;
height:500px;
text-indent:-9999px;
width:613px;
}
This fix is specific to this image because it has a white background
#range-logo {
margin:0 auto;
background-image: url(http://midwaycinema7.com/wp-content/uploads/2015/12/home-specialism-section-2.jpg);
background-repeat: no-repeat;
background-size: cover;
display: block;
max-width:100vh;
height: 100vh;
width: 1240px;
}
You can create a transparent hover state on the background image and then where the hover state is called in the HTML you can wrap that in an anchor tag.
.hover-state {
position: absolute;
top: -1px;
bottom: 0;
left: 0;
right: 0;
height: auto;
width: auto;
opacity: 0;
padding: 0;
transition: .5s ease;
opacity: 0;
#include respond ("altmax-1024") {
opacity: .4;
}
&--transparent {
background-color: transparent;
}
}
.hover-state-item:hover .hover-state--transparent {
opacity: 0;
}
Related
I have created an ID for my HTML body called #indexbody. I put a background image with CSS using background-image:url("hs2.webp");. Because I Have done it this way, is there a way to change the background opacity of my image without dimming the entire body?
CSS:
#indexbody{
background-image:url("hs2.webp");
background-size: 100% auto;
}
If you put the background-image on the before pseudo image rather than the actual body element you can set its opacity down without that affecting the whole body element.
Here's a simple snippet:
body {
width: 100vw;
min-height: 100vh;
margin: 0;
}
body::before {
content: '';
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url(https://picsum.photos/id/1015/300/300);
background-size: cover;
opacity: 0.4;
position: absolute;
}
<body></body>
There are many different ways to do this. One of the most common is using a pseudo-element. In this case, I used :after to create the background color overtop of the picture then used z-index to make sure my absolutely positioned text elements are layered ahead of the pseudo-element.
#indexbody {
background-image: url("https://dummyimage.com/600x400/000/fff");
/* background-color: rgba(0, 0, 0, .5); --> solution without using psuedo-element */
background-size: cover;
background-position: center;
width: 100%;
height: 500px;
position: relative;
}
#indexbody:after {
content: "";
position: absolute;
background-color: orange;
opacity: .5;
inset: 0;
}
p {
position: absolute;
color: white;
background-color: blue;
z-index: 1;
text-align: center;
}
<div id="indexbody">
<p>absolutely positioned element overtop, unaffected by opacity</p>
</div>
Using the :before or :after CSS pseudo-elements, you apply the div with a background image and set an opacity on it.
I have written the following code and I simply cannot understand why the image I have setted to be on the background doesn't strech vertically to cover the full page .
I would appreciate your help
html{
height: 100%;
overflow-y: scroll;
}
html:after{
margin-bottom:0;
content : "";
background: url("../images/van1.jpg") no-repeat center center;
background-size:cover;
width: 100vw;
height: 100vh;
position: absolute;
overflow: hidden;
top: 0;
left: 0;
opacity: 0.5;
filter: alpha(opacity=50);
z-index: -1;
}`
Using html:after is like adding a child inside <html> beside your <body> tag, it's not valid and browsers may not render it correctly, it's better using body:after and set height: 100% so it covers your page.
I am trying to use a CSS3 Step Animation to change from one image to another using a simple 2 image sprite sheet. I can't seem to get the second image to load in place of the first image. I have looked at other examples and I really can't see where I am going wrong. So if anyone could help it would be much appreciated. Thanks.
CODEPEN DEMO
<div class="character">
<div class="beak"></div>
</div>
#keyframes newquestion-beak {
from { background-position: 0px 0; }
to { background-position: -100px 0; }
}
.character > div {
background-repeat: no-repeat;
height: 100px;
width: 100px;
position: absolute;
top: 0;
left: 0;
}
.character .beak {
background-image: url(http://s22.postimg.org/6mb37v5sh/compiled_beaks.png);
animation: newquestion-beak .8s steps(2) infinite;
}
Your background positioning wasn't right. Try:
#keyframes newquestion-beak {
from { background-position: -100px 0; }
to { background-position: 100px 0; }
}
Running demo on CodePen
Using "steps(2)" in the animation seems to only move the image halfway. Doubling the 'to' background-position works for me, using Chrome.
Demo with change.
I have a fullscreen cover background and I'm trying to get a footer over it which darkens the background. However I also need to put a picture on top of it which get darkened as well. I've tried to use z-index and sliced image with transparency but it was just blue and it didn't work.
#footer {
height: 100px;
opacity: 0.4;
background-color: #000000;
}
html {
background: url(background.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
height: 100%;
width: 100%;
}
Any help much appreciated.
Edit:
I was able to resolve it simply by adding another div element above with a negative margin without the use of z-index at all
<div id="footer">
</div>
<div id="footer-main">
<img src="uqu-logo.png">
<p>Got question? Check our FAQ</p>
</div>
And the CSS
#footer {
height: 100px;
opacity: 0.4;
background-color: #000000;
background-image: url('footer-bkg.png');}
#footer-main {
left: 50%;
margin-left: -567px;
margin-top: -82px;
position: absolute;
color: white;}
I was able to resolve it simply by adding another div element above with a negative margin without the use of z-index at all
<div id="footer">
</div>
<div id="footer-main">
<img src="uqu-logo.png">
<p>Got question? Check our FAQ</p>
</div>
And the CSS
#footer {
height: 100px;
opacity: 0.4;
background-color: #000000;
background-image: url('footer-bkg.png');}
#footer-main {
left: 50%;
margin-left: -567px;
margin-top: -82px;
position: absolute;
color: white;}
try adding
#footer { position: relative; z-index: 9999; }
Where exactly is this picture going? What div is it going into? Because right now if I'm understanding correctly, you just want a box which is on a layer above the background which has reduced opacity. [jsFiddle] Which it is technically already doing.
Can you give us the HTML markup as well? Or input it in a jsFiddle so we can see where the problem is.
Also if Z-indexes weren't working, make sure you are assigning a z-index to every element and not only the #footer.
#footer {
height: 100px;
opacity: 0.4;
background-color: #000000;
z-index: 999;
}
#img_div {
z-index: 1;
}
I want to fill my page with a background image and have the text aligned in place with that background. With the below code, the background image loads at the top of the page, and the text goes under it. I know I can use the "background: " function, but the way it is done in my below code allows for automatic resizing, regardless of browser size (i.e., mobile devices have small browser sizes). So, I just want the background image to go behind the text.
<html>
<head>
<title>Title</title>
<style>
img.bg
{
min-height: 100%;
min-width; 781;
width: 100%;
height: auto;
top: 0;
left: 0;
z-index: -1;
}
#media screen and (max-width: 781)
{
img.bg
{
left: 50%;
margin-left: -390.5;
}
}
#container
{
position: relative;
width: 781;
margin: 50 px auto;
height: 758;
border: 1px solid black
}
#left
{
position: relative;
left: 1.280409731113956%;
top: 14.51187335092348%;
padding-top: 10px;
padding-left: 10px;
padding-right: 10px;
width: 50%;
height: 50%;
color: #FFFFFF;
position: relative;
}
p
{
font: 14px Georgia;
}
</style>
</head>
HTML
<img class="bg" src="background.jpg">
<div id="container">
<div id="left">
<p>
Text
</p>
</div>
</div>
</body>
</html>
Make your BG image have a z-index of 1, and your #container div to have a z-index of 2. Does that work?
img {
position: relative;
z-index: 1;
}
#container {
position: relative;
z-index: 2;
top: 0px;
left: 0px; /*or whatever top/left values you need*/
}
Just use position: fixed for your background image http://dabblet.com/gist/3136606
img.bg {
min-height: 100%;
min-width: 781px;
width: 100%;
top: 0;
left: 0;
position: fixed;
z-index: -1;
}
EDIT (I wish there was a way to make it more visible than this)
OK, after reading the comments for the original question, I understand that the purpose is to have a background that scales nicely for any display sizes.
Unfortunately, quite a lot of mobile devices have a problem with position: fixed - you can read more about this here.
So the best solution in this case is to use a background image, not an img tag, having the background-size set to 100% (which will stretch the image - example), or to cover (which will scale the image such that it completely covers the screen - example)
Well, maybe you can also try that css:
body{
background: url(images/bg.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
it's should cover all youre page even when page size is changed