I have quite a problem with CSS. This is my code:
header {
background-color: #FFE0E0;
background-image: url('obrazky\logo.gif');
background-position: top right;
background-repeat: no-repeat;
}
and the problem is that my background image is not showing in the header. I am 100% sure that url to my image is correct. Any ideas why it isn't showing up or how to fix it? I use Google Chrome.
You should set a fixed height and width for the element. The background image itself does not occupy any space in the element. Such as:
width: 200px;
height: 500px;
You must setup the height of the header, eg:
height: 600px;
If you can see just the header with the background color and without the image, then the image path is wrong, I think it is the first time I've seen a backslash instead of a forward one in a bg url, so try:
background-image: url('obrazky/logo.gif')
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'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.
I am having a great deal of difficulty with getting rid of the white space at the bottom when I apply a CSS3 gradient and the content has insufficient height for a scrollbar.
Such as here: http://womancareolympia.webs.com/
I have tried playing with setting both html and body heights to 100% or auto. I am able to make the gradient go to the bottom this way, but then when content requires a scrollbar, the content flows past the gradient.
Thanks for the help!
Add min-height: 100% to body.
Remove all instances of padding-top from body (or otherwise set it to 0).
Set top: 129px on #fw-container.
Set margin-bottom: 110px on #fw-container.
Add overflow: hidden to #fw-foottext.
(tested in Chrome+Firefox only)
I do think you should redesign your CSS to not use stuff like top: 100px and margin-top: -50px all over the place. There's just no reason for it.
I had the same problem. This can be resolved by adding the following properties to the body element (where the linear gradient has been defined)
body {
background-image: linear-gradient(
to right bottom,
var(--clr-primary-100) 0%, // Random colors
var(--clr-primary-900) 100%
); // Linear gradient
background-size: cover; // Add these properties to your body tag
background-position: center;
background-attachment: fixed;
background-repeat: no-repeat;
}
I hope this helps. Let me know if you face any problems.
in the header menu i am using an image with repeat-x property. it works perfectly in full screen however in low resolution i.e in 1024X768 and 800X600 screen it leaves some margin. it leaves the margin when a horizontal scroll takes place. how do i make sure even if horizontal scroll exist the repeat-x property should cover the area of the scroll. is there any css property for this?
the css for this i am using is.
#header {
height: 111px;
background: url('../img/header-bg.jpg') repeat-x;
width: 100%;
}
let me know if you want more code ill host it in jsfiddle. thank you.
i have hosted my site in http://iarmar.com/test/bn just in case you want to test.
Set min-width: 1040px; to your #header
As expalined in my comment (and by Jeaffrey), set your #header with a min-width or use 100%.
See this www.viralment.com oh its says 30 at least
try using these:
background-image: url("gradient_bg.png");
background-repeat: repeat-x;