The first thing I'd like to point out is that I know almost nothing about CSS. At the moment I'm trying to create a website using Wordpress and I want to add an image that acts like a link and which changes to another image when the mouse is hovering over it.
I found following tutorial for this: https://www.organicweb.com.au/17523/wordpress/image-link-css/
I've done exactly what this tutorial says (basically it's more or less just copy & paste), but my image won't show up and I have absolutely no idea why. Even stranger is that the image does show up when I use a definite image size in the stylesheet (for example: "width: 300px; heigth: 250px;"). But it doesn't work when I use "background-size: cover;", "background-size: contain;", "background-size: auto;" or any other possibility.
This works:
.ge-link {
background-image: url(http://.../wp-content/uploads/2017/02/325484_1280.jpg);
background-repeat: no-repeat;
background-position: center;
width: 300px;
hight: 250px;
display: block;
This doesn't work:
.ge-link {
background-image: url(http://.../uploads/2017/02/325484_1280.jpg);
background-repeat: no-repeat;
background-position: center;
background-size: cover;
display: block;
Does anyone have an idea what I might be doing wrong?
what I guess you could do is to have both images together in your html and use :hover to show a different image once the main image is hovered:
HTML
<a id="linkId" href="www.yourlink">
<img class="image_on" src="yourFirstImage.png" alt="picture">
<img class="image_off" src="yourSeconfImage" alt="picture 2">
</a>
CSS
.image_off, .link-block:hover .image_on{
display:none
}
.image_on, .link-block:hover .image_off{
display:block
}
.ge-link is not an image tag, it's just a container that has a background image. In the second case, you didn't define a height for that container (also no width, but that's not the primary cause for your problem), so that container is 0 pixels high - no heigth! It actually contains the background image, but with 0 heigth it doesn't show anything.
So just use those width and especially height settings as long as you use the image as a background image. Or use a real image element (<img>).
P.S.: You can use the width/height settings and background-size: cover - works perfectly...
Related
I am quite new to the css and bootstrap i have searched and tried the w3c solution and also the SO but did not work well. Actually i want to have an image as a background on my homepage. on which there would be my content like 3 small buttons/icon in the middle of the page.
I have tried this
<div id="homepage">
</div>
css:
#homepage{
background: url(../images/homepage.jpg);
background-size: 100% 100%;
background-repeat: no-repeat
}
but it is not working.
2nd Solution:
Second thing which i tried was to include a img tag then add my content and drag to the middle by absolute position which i think is not a good way because responsiveness did not remain there.
Can any one help me in this regard.
Assuming you double checked the image path,I think the problem is the size of the div.
try giving your div a fixed width and height in order to test if at least this way the image is showing.
<div id="homepage" style="width:500px;height:300px">
</div>
Then check out how to use the bootstrap grid system in order to make your div as big as you wish.
You can try this:
#homepage{
background: url(https://paulmason.name/media/demos/full-screen-background-image/background.jpg);
background-repeat: no-repeat;
background-size: cover;
height: 100vh;
width: 100%;
}
http://jsfiddle.net/y558vo9a/
if you want the background image to be in your index page, there is no need in adding '../' and no need in adding background-size, -repeat when you can actually set your code so;
background: url(images/homepage.jpg) no-repeat 50% 50%;
but if it works for you, you can use it so. And i also noticed, you forgot to close your background-repeat with ';'
I've been beating myself this weekend to get around this one.
I have a site that uses Bootstrap 3.0 and a Carousel with background images, and I've managed to reproduce my question in a small fiddle.
I have a max-heighted div with an image inside. The image will typically be larger than the div (at least in height). I'm using the img-responsive class from bootstrap to make sure that in mobile browsers the image scales down. That is the reason why I max-height the div and don't put a fixed height on it.
My questions is: how can I get the image to vertically align to the middle?
I've tried:
Adding classes display: table and display: table-cell, but a table cell cannot have a max-height.
Aligning things vertically but none seem to work.
Setting a negative margin on the image using javascript, but that makes the div smaller as well as the div uses the image to size itself.
Using css background instead of an inline image. This does not make the div be (at most) as large as the image and doesn't allow responsive growing/shrinking.
Fiddle: http://jsfiddle.net/SabbeRubbish/dZQ26/4/
<div class="carousel-inner">
<div id="frame" class="item active">
<img src="https://www.google.com/images/srpr/logo11w.png"
class="img-responsive" />
</div>
</div>
Can anyone recommend me good and clean ways to get the image to center vertically? Or tell me what the hell I'm doing wrong? :-)
Thanks.
PS: why center vertically? If the page is very wide, there is a large clip area as the image grows with the page. It is nicer to show the middle of the picture rather than the top.
is this something closer to what you are trying to achieve ?
#frame {
border: 1px solid grey;
max-height: 100px;
min-height: 100px; /* Remove this line */
padding: 15px 0px; /* Add this line to always have height on the div */
background-size: cover;
background-image: url(https://www.google.com/images/srpr/logo11w.png);
background-position: center center;
}
http://jsfiddle.net/rrEYJ/
EDIT:
As suggested in the comments you can also use background-size: contain; to have the entire image inside the #frame element. You will probably have to also use background-repeat: no-repeat; in that case.
Check this fiddle: http://jsfiddle.net/rrEYJ/1/
EDIT2:
Based on your comment I did some research and apparently the background-size property can be set in percentages also. Based on this new information see this fiddle:
http://jsfiddle.net/rrEYJ/3/
EDIT3:
The css had a min-height property that's why the div wasn't changing it's height. Check this fiddle: http://jsfiddle.net/rrEYJ/4/
I hope this helps.
Add style for image like this
#frame img {
width:auto;
max-height:100px; }
I'm putting this in a widget in WordPress:
<div style="background-image: url('http://www.domain.net/img/subscribe.png');
background-repeat: no-repeat;"> </div>
But the result is this:
When I want the result to be this:
So it's barely showing the top of the background image I want. How can I achieve getting the full image -- but of course I don't want it to repeat x, or repeat y? And should I be using div tags, or something else? Any guidance in this regard would be appreciated!
Set that div's width/height to the same size as the background image. I would recommend something like this:
HTML
<div class="newsletter-subscribe">
<!-- any additional content can go here, like a <form> for example -->
</div>
CSS
.newsletter-subscribe {
background-image: url('http://www.domain.net/img/subscribe.png');
background-repeat: no-repeat;
background-position: top left;
width: 400px; /* whatever the picture width is */
height: 300px; /* whatever the picture height is */
}
The reason why you'd put this in a stylesheet, instead of inline, is so that you can more easily apply other styles to your container (ie div.newsletter-subscribe), as well as make changes in your stylesheet - instead of in template and/or partial files. Styles are much easier to maintain in a stylesheet than inline.
My css:
a.red, object, embed {
display: inline-block;
background-image:url(/bowties/red.png);
background-size: contain;
background-repeat:no-repeat;
width: 100%;
height: 30%;
}
My Html:
<a class="red"/>
What I want to do is have the image automatically sized right so I can use these as menu items. One on top of the next and so on. If I kept them in an image tag wrapped in an anchor then "height: auto;" works. I want to turn them into sprites which is why I am pulling it out, but I would like these to scale based on the size of the screen. Thanks in advance!
From my understanding this is not possible.
I found a resource that simply had me add a relatively sized 'filler' image. A blank placeholder that caused the div to get a height and width, then be able to be re-sized on the container re-size. Slight bit of a hack, but worked.
How can I get the background of a Responsive website to adapt and move with the rest of the content on the Website?
My background is split doesn't cover the entire background, only partially to create an effect where each sides are of a different color (gray).
However, when I change the size of the screen, all of the elements will be moved and the background will not be positioned as it was initially.
How could I go about making sure that no matter what the size of the window is, the "gray bars" will always fit with main content?
If you look at this picture, this is how it should look like:
Also here is the script for the background image as well as the site wrapping:
.gray {background:url(http://frenchegg.com/images/gray.png) no-repeat; height:100%;}
.lgr {background-size:85% 100%; background-position:center;}
.main-content p {
color:#555;
}
.site-wrap {
position:relative;
min-height:100%;
background-color:#ebebeb;
}
You can find the website here.
Ok, you're page may need a little restructuring, but I believe I have a solution for you.
Initially, the main problem stems from background size being set to percentage widths (note background-size is a css3 property and not fully supported... but thats another issue).
For a proof of concept and for you to see what you're going to have to change, try to following:
Remove the background on 'gray' (line 1880 in styles.css)
Apply inline rules to 'row' (NOT TO THE ROW RULE) on line 230 in the source so it looks like the following:
<div class="main-content">
<div class="row" style="
padding: 65px;
background: url(http://frenchegg.com/images/gray.png) no-repeat;
background-size: 85% 100%; background-position: center;">
The rules are as follows for copying purposes.
padding: 65px;
background: url(http://frenchegg.com/images/gray.png) no-repeat;
background-size: 85% 100%;
background-position: center;
Note the padding is a bit screwy, but it's simply to show you where your background needs to be to respond correctly.
Cheers mate,
GW