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 ';'
Related
Dear fellow programmers
I have a little issue with my CSS code. I have an image as background and want it to cover the whole screen. The issue is that it only covers 4/3 of the background. There is a blank space at the bottom of my page.
Here is the code I have so far:
body {
background-image: url(http://gymgames.ch/img/background.jpg);
background-size: cover;
background-repeat: no-repeat;
background-position: fixed;
}
The image URL is working if you want to see the whole image.
The page URL is: https://gymgames.ch
Thanks for your help in advance
If you don't have any other content on the page you can add something like
body{
min-height: 100vh;
}
As you specified, the background image is covering body, but body will not necessery be as height as your device.
You could add min-height: 100vh; to body and then it will work.
Btw. you are using background-position: fixed; which is an invalid value for the property, have a look here. I think what you were looking for was center instad of fixed?
EDIT:
It it worked before, you have had enough content, so the body was high enough.
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...
I am building a Wordpress site. On the homepage, I am trying to position a ball without affecting the other divs under the slider, which the theme maker has given the same class name. What I want to do is make the ball small and place under the writing. The theme does not allow me to assign a class to that image. This is what I've tried but it affects the other images in that row. Could someone help me please? I am thinking I may be able to use first child but not sure. Thanks!
.cg-strip .cg-strip-bg {
background-size: contain !important;
background-position-y: 90%;
background-size: 50%;
}
Use:
<div class="cg-strip-bg " style="background:url(http://adasportsandrackets.com/wordpress/wp-content/uploads/2014/10/ada-460-mole150x146hp.png) no-repeat center bottom / 80%!important; "></div>
Note!! don't use: background-image: but background:
with all this stuff:
url(blabla.png) no-repeat center bottom / 80%!important
80% is the size, might be a bit too much below your text, but you're free to fix till you get the desired result.
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 quite new to CSS and for sure I'm missing something basic here but I really can't figure it out. This is the code:
In HTML I have this:
<div class="tab-left"></div>
In CSS:
.tab-left {
background-image: url(images/left.png);
background-repeat: repeat-y;
position: absolute;
width: 96px;
height: 1049px;
margin-left: -40px;
z-index: 99999;
}
However, the repeat-y property does not work. This is the site in question: http://ziontouch.com/wordpress/
What am I doing wrong?
Your repeat is working fine. The problem is that the height isn't tall enough to reach the bottom edge of the page.
The background is repeating.
The problem is that the .tab-left has an explicit height set, which isn't as tall as you are expecting.
It works but the height of your DIV element is not big enough to fill up the whole space...
It is repeating, just up to 1049px as specified by your height attribute.
You should use a bigger height.
.tab-left {
height: 1622px;
}
That reaches exactly the beginning of the border bottom.
I see that you're using jQuery in your page so what you can do is use jQuery to find the height of your div#page and use that value to set the heights of your tab-left and tab-right classes.
Like this:
$('div.tab-left').css('height',$('div#page').height());
$('div.tab-right').css('height',$('div#page').height());
Then as content is added to your page, it will adjust as necessary.