Having some trouble figuring out the background-image in css - html

we are about 10 danish people from an IT class in Denmark, and we have discovered that the background-image thing in css isnt really working like we want it to.. Maybe anyone out there can help us?
I personally havent worked much with the problem, but my friend Jacob (Who is busy atm so he cant write this for himself) has used like the past hour on figuring out how it works.
What he has found is, that it works when you give it a URL like:
background-image: url("i.imgur.com/AO4oM9a.jpg");
It will work just fine, but if you try with a local file:
background-image: url("images\background.jpg");
It wont work, we have tried some different stuff, like putting in the full destination of the file, like "c:/desktop/website/images/background.jpg" you know, (Probably not valid, i just typed something so you would understand what i meant by full destination).
Anyone know how or why this wont work?
BTW we are doing it in the HTML tag in a .css file, like:
html { background-image: url("images\background.jpg"); }

You are using back slash (\) instead of forward slash (/). And other thing to remember is you should give correct path of image.
if your css file and image is in same folder than you can do like this
html {
background-image: url("background.jpg");
}
if your css is inside css folder and in same directory you have your image inside images folder then you can do like this
html {
background-image: url("../images/background.jpg");
}

Try to use like this:
html { background-image: url("/images/background.jpg"); }
Or
html { background-image: url("images/background.jpg"); }

Try this one:
html { background-image: url("../images/background.jpg"); }

Just write:
background:url('../images/background.jpg');
Add more css as:
background-size:cover; min-height:400px; width:100%;
background-position:center center;
See below working example:
/*--CSS--*/
.image-box{background:url("https://cdn.pixabay.com/photo/2014/03/22/22/05/sunbeam-292987_960_720.jpg");
background-size:cover;
min-height:300px;
background-repeat:no-repeat;
background-position:center center;
}
<!--HTML-->
<div class="image-box">
<h1>This example</h1>
</div>

This may help:
always remember to give background image in style.css(css file) and if you have no choice left then define it in HTML and always keep images and css files in a folder names assets and then you can call them out easily.
background-image: url('assets/TYdollarsign.jpg');

Related

Background issues

I need to create a small website that can be opened and functional in a single file. I can't quite figure out how to get an image background to show up. I have my image in Desktop/assignment/Website-Background.jpg. I have tried a bunch of different ways to get it to work, but it just wont. My current code is:
body{
height: 100%;
}
.bg {
background-image: url("Website-Background.jpg");
height: 100%;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
And I have tried also tried
body {
background-image: url("Website-Background.jpg");
}
Can somebody point out what I'm doing wrong?
First in your browser press F12 and youll see if the image is being called or not in the console window, Then if it is being called and there is no error then maybe set a height of 200px and see if the image shows up.
I do not believe you are indicating the location of the image properly. Remember for CSS, you have to back out of folders and go into others to find the file. Where is your HTML file? You may have to back out of its location and into your assignment folder.
If you are backing out:
body {
background:url("../assignment/Website-background.jpg");
background-size:cover;
}
If you simply have to go deeper into your folder:
body {
background:url("assignment/Website-background.jpg");
background-size:cover;
}
Just a side note that if you "really" want to have your website as a single file (meaning that background image is another file), you can encode your image into base64 via some tool (like) and then have it in your file.
Just put the image and your html document in the same folder and your code will work like a charm...You will have to change nothing in code to make it work..

Issue with background image (won't show)

I got issue with background image on my webpage (won't show). I tried to place it in different <div>s but I cannot find solution, how to solve it. Also I tried to find solution here, but nothing worked for me. I don't have written long path to image, because all is in one folder. Also I know, I have it little chaotic.
I don't want to repair my wrongs, but just want to know how I can solve it and why it not work.
Here is my HTML source
And here is my CSS source
Place the URL within quotes, within the CSS file in the background property of the CSS file. url(limo.jpg) should instead be url("limo.jpg")
Depends what browser you're on. Try putting limo.jpg in quotation marks and adjusting to background-image:
body {
margin:0;
padding:0;
line-height: 1.5em;
background-image: url("limo.jpg") no-repeat center fixed;
background-size: cover;
}

Using Jumbotron, CSS, and Wordpress to display background

I'm trying to create my first Wordpress theme, and I've been stuck on this for a few hours. I know how to add images using HTML(Through Wordpress), but I can't add images in the CSS, specifically, through background-image.
My guess is that it has something to do with the file path, but I was sure I had everything right. Also, I tried checking for spelling errors. If I didn't mess up the file path, I don't know what I did.
Does anyone have any ideas of what is wrong?
.jumbotron {
background-image: url('Images/header.jpg')
height: 500px;
background-repeat: no-repeat;
background-size: cover;
}
To give additional information about the file path, All the files are inside of the theme's folder. The CSS stylesheet, header.php, footer.php, and the "Images" folder are located here. In the images folder is a picture named header.jpg.
the problem is that you forgot ; after url()
Fix this:
background-image: url('Images/header.jpg')
to
background-image: url('Images/header.jpg');
and maybe try adding no-repeat like:
background-image: url('Images/header.jpg') no-repeat;

How do I put a picture so you resize?

I have this site :
http://reliance.dg-site.com/es/ ---SPANISH LANGUAGE
I have this site:
http://reliance.dg-site.com/--- ENGLISH LANGUAGE
I want the picture on the front page (website in Spanish) to be the first page of the site English.
I do not understand why not look good in Spanish website ... I want to resize my image
This is code css:
.page-id-553 #content
{
background:url("/wp-content/themes/reliance/images/ccc.jpg")
}
Image size is too large? I tried to do less but unfortunately it still does not look too good
Can you help me to solve this problem?
Thanks in advance!
I have checked your site and found a change in the css.
In http://reliance.dg-site.com/, you have used
background-image: url(http://reliance.dg-site.com/wp-content/uploads/2014/05/shutterstock_132802436-13.jpg);
for your body tag.
But in http://reliance.dg-site.com/es/
.page-id-553 #content
{
background:url("/wp-content/themes/reliance/images/ccc.jpg")
}
So, Remove the code inside .page-id-553 #content{ } and add
body {
background-image: url("/wp-content/themes/reliance/images/ccc.jpg");
}
If you want to use a background for this page then try
body.page-id-553 {
background-image: url("/wp-content/themes/reliance/images/ccc.jpg");
}
Welcome to SO, if you could be a little more specific with what you need in future that would be a massive help. Also if you show methods you have attempted also that would help narrow down the issue.
For now, based on what you said, I believe this would achieve what you are after. I simply applied these to the .page-id-553 #content class/id within the console.
background-size: cover;
background-repeat: no-repeat;
background-position: center center;

Body Background Image doesn't shows with CSS, only in HTML

I have a really weird problem. I have tried to use CSS to set the backgorund of the body, but it doesn't allow me. When I'm using the simple HTML tags within the tag
<body background="images/bg.jpg">
its WORKING! BUT when I'm using this in CSS:
body {
background-image: url(../images/bg.jpg);
}
It doesn't shows the BG image.
Everything is correct, if I check the folders, everything is in its place. I have tried this in Chrome and Mozilla, but neither of them are working.
Any suggestions?
If your CSS is inline:
<style>
body { background-image: url('images/bg.jpg'); }
</style>
If you're using a file, say css/main.css:
body { background-image: url('../images/bg.jpg'); }
Alternatively, you could use an absolute path:
body { background-image: url('/images/bg.jpg'); }
This example requires the image directory to be in the root web directory.
Try url("./images/bg.jpg") or url("/images/bg.jpg").
I had exactly the same trouble here. I thought that I tried everything but ... There was one more thing.
Firstly, my css path as followed:
assets/css/custom/main.css
my image folder as followed:
assets/img/bodyBackround.jpg
In order to display my backround on the page using css I had to go 2 folders back. Example from my page:
body{
background: url(../../img/bodyBackround.jpg) repeat;
}
Where ../../ means go back 2 folders. Hope this helps.
More information can be found here http://jeffreybarke.net/2013/06/paths-and-urls-relative-and-absolute/