i have little issue with repeating background image using bootstrap framework, but i'm quite beginner. I tried many ways already and nothing works.
Can u help me with that please ? I've tried for example that :
<style>
html, body {
background: url("img/bg-pattern.png") repeat;}
</style>
Your path is probably incorrect. As far as I can see, bootstrap has a different folder structure than what your code suggests. Try this:
body {
margin: 0;
background: url("../img/bg-pattern.png") repeat;
}
I'm unable to reproduce your issue on JSFiddle. For this reason I can only presume your image path is invalid.
In specifying img/bg-pattern.png, you're pointing to the bg-pattern.png file contained within the img folder contained within the same folder as your CSS. This assumes a folder structure of:
img
myHtml.html // Where your style element is included
Make sure your "img/bg-pattern.png" is present in the same folder where your file is present
else give the absolute path of the image.
Try using FireBug, maybe you'll see that the <body> tag is much smaller ( in height ) than you think.
I've moved my background: ... from the <body> tag to the actual <div> that contains the entire content ( which grow dynamically vs the <body> ) and the background is repeatable there ...
Related
How to add background in Drupal 8 views-view-fields.html.twig' files.
I try like this but it's don't work. Using views I just output image paht.
<div class="cover-img" style="background:url('{{ field_image_1 }}');">
</div>
Thank you
you are best to do that in your css file by doing this:
.cover-img { background: url('/sites/all/themes/....); }
if you have to put it in your twig file, first make sure its even outputting the correct img url by putting that field_image_1 into an empty div element.
I have tried to link a path for an image in my CSS several different ways but it won't work is there anything that I'm missing?
background:src="C:\Users\simcity\Documents\HTML\Header.jpg";
It looks like you're trying to set a background image.
In that case
background: url('C:Users/simcity/Documents/HTML/Header.jpg');
would be the appropriate method.
Actually you must not use local paths, but else URL paths so for example:
background:src="C:\Users\simcity\Documents\HTML\Header.jpg"; might be:
background:src="Header.jpg"; if your image resides at the same level of your html document or background:src="/path/to/your/html/and/img_folder/Header.jpg"; if the image is in another folder (the folder must be at the same level of your html)
EDIT:
is background:url('path for the image') not background:src="path for the image"
I think the CSS syntax what you are looking for:
#id {
background: url("C:\Users\simcity\Documents\HTML\Header.jpg");
}
<!DOCTYPE html>
<html>
<head>
<style>
.main {
background-image: url('a.jpg');
}
.main:hover {
background-image: url('b.jpg');
}
</style>
</head>
<body>
<div class="main">
</div>
</body>
</html>
When I load the page, my a.jpg didnt appear at all, hence no hover effect
Is it something wrong with my code?
http://jsfiddle.net/ZH9EL/6/
Nothing is wrong with your code. The first image is being redirected to the main website so you don't have an image being loaded. You will have to host it locally. I used a different image and it works.
No there is nothing wrong with your code, it could work, but I believe it is risky to use 2 images, if 1 is not loading it will not work...
You'd like to use two images but if hover image is taking to long to load or just not loading at all it will not work very well..
You might want to try Alois Mahdal's answer: https://stackoverflow.com/a/19967062/3217130 please read their reply..
Your css should be something like:
<style>
#main {
width: **Yoor-width-in-pixels**.px; height: **Yoor-heigth-in-pixels**px;
background: url('a-b.jpg') no-repeat left top;
}
#main:hover { background-position: -Yoor-negative-width-in-pixelspx 0px }
</style>
This will work and will load normal and hover at the same time so you wont face problems with dns or server delay and other problems that could make pages look ugly if images are not loaded...
Please try Alois Mahdal's answer, this will work for you, if you don't understand how to create this for your images (a-b.jpg and new smaller but better code) then I would like to tell you how to do this with your images and classes and the result you need.. I create sprites with Paint .NET or I use spriteme.org to optimize CSS on running websites you can copy new css and images if you're using spriteme.org they will be created on the fly. There are lot's of ways to create or edit images...
I hope my answer was helpful to you,
Happy coding
So I am working on a website and I'm trying to set the background of empty div with a set size and I can't figure out why it isn't working. Anyone see something I don't? Thanks, Tim.
Code:
.headerbg{
width:100%;
background-image:url('bg.jpg');
height:500px;
margin-bottom:25px;
}
<div class="headerbg">
</div>
To prevent such errors, you should define your urls relative to the document root. For instance, if your image is at http://example.com/path/to/image.jpg then you should use url('/path/to/image.jpg'). This removes any possible ambiguity.
There is nothing wrong with your code, when I try it with a different image, it works fine:
background-image:url('http://placekitten.com/100/100');
http://jsfiddle.net/Guffa/bWKBB/
So, the reason for the problem is that the browser can't find the image. There can be several reasons for that, like:
The image doesn't exist
The image exists in a different folder
If you have the CSS code in a style tag in the page, the URL for the image is relative to the location of the page. If you have the CSS code in a style sheet, the URL for the image is relative to the location of the style sheet file.
I create CHM help file.
For decorate it I use css and option 'background'.
All my images saved in img.
My css setting for header like this:
.data{
width:100%;
height:80px;
display:inline-block;
background:#fff url(/img/bg_fill.png) repeat-x;
}
HTML code:
<div class="data">Hello world</div>
In HTML everything is OK, but when I make CHM file background does not have background.
Why? Maybe path is wrong? Somebody have simular problem?
That's problem with the img path. I suspect img folder is in the same directory where your css and html files are located. If so, try to remove first slash in image url: url(img/...
Well, I resolve my problem in my self.
During in experement I saw next sequence, when I add image in tag img and ny header is show.
I think whem CHM maked program does't add image into CHM file and all path is wrong. When I add images in div which hide - all resources is add and show my header.
Just simple solution is we just need to provide full path like where the image is located like C:\Documents and Settings\User\Desktop\Images...