I am following a tutorial and trying to get a fixed image as the background to my webpage. In the tutorial the code the person entered works perfectly. However when I enter the exact same code the image does not appear. Any reason why?
HTML:
<div class="landing">
<div class="home-wrapper">
<div class="home-inner">
</div>
</div>
</div>
CSS:
.home-inner {
background-image: url("test.jpg");
}
I would suggest double checking to make sure path is correct. Also double check that your css file is properly tagged and double check that the file name is correct as well.
You need to specify height and width every time when you implement an image to your code. So, if you're image has resolution 200px x 200px, you want to implement it in this way:
CSS
.home-inner {
background-image: url("test.jpg");
width:200px;
height:200px;
}
Related
I have been trying to get an image saved on my computer and set it as a background image covering the whole page using CSS. Please help.
The html code is this:
<div class="page-container">
<h1>HI</h1>
</div>
The CSS code is this:
.page-container {background-image: url(css/images/huelvapiersunset.jpg);
height: 100%;
}
The files are organised like this:
imagetest/css/images
Thanks in advance!
In order that the image appear as background with the provided setting two main changes have to be made in styles.css.
1. The url in the background-image to become url('images/huelvapiersunset.jpg'). Here the quotes, ', were added add the css was removed since this file is already in the css folder.
2. The height to become equal to the height of the used image in pixels.
Below is the code of a working example.
.page-container {
background-image: url('images/huelvapiersunset.jpg');
height: 1167px;
}
And the appearing background image with text.
I'm somewhat new to web development (self learning) and I just can't seem to get over the hump of learning how to add background images on CSS.
I added a image on HTML and it shows up fine on the web browser, but when I try to add the same image as a Background Image it's not working. I'm sure I'm missing something simple but so far I cant figure it out. Here is the code
This is my HTML img code that works perfectly fine
<div class="pic"
<img src="C:\Users\omar\Pictures/applelogoretro.jpg.jpg" atl="happy"
style="width:85%; height:75%;"/>
</div>
Background image HTML
<div class="backpic">
<p>This is the TEXT on my BackGround image</p>
</div>
CSS
.backpic{
background-image: url"C:\Users\omar\Pictures/applelogoretro.jpg.jpg";
}
Why does the image work fine as a regular image, but not as a background image. The more detail your answer the more it will help me, thanks in advance to all!
May be try checking syntax, see if this will do it?
background-image: url("pathtoyourimage.jpg");
Url in css should be inside parenthesis:
So this line
background-image: url"C:\Users\omar\Pictures/applelogoretro.jpg.jpg";
Should be background-image: url("C:\Users\omar\Pictures/applelogoretro.jpg.jpg");
As #Raptor and #YAHsaves pointed out, you should use relative paths
Try checking the syntax error(>), see if it will do this
.pic{ background-image: url(ggg.jpg);
background-repeat: no-repeat;
}
I am trying to add multiple images to a page using CSS. I am doing it this way rather than in a more 'straight forward' way to ensure mobile compatibility (it allows me to set percentage widths for the images which allows me to get them to display at the right size on mobile).
I currently have in my stylesheet:
div.image {
content:url(http://example.com/example-image1.jpg);
width:100%
}
div.image2 {
content:url(http://example.com/example-image2.jpg);
width:25%
}
and then a few more images. And then in certain parts of my page:
<div class="image">
</div>
<div class="image2">
</div>
The problem I am getting is content:url only seems to be working in the first instance, that is the only picture that displays. It doesn't seem to be a problem with multiple div.s as if I set the 2nd div to the same content:url image as the first div, that image does actually display twice.
Sorry if this is a dumb/noob question...I just couldn't find an answer.
You forgot a bracket :
div.image2{
content:url(http://example.com/example-image2.jpg);
width:25%
}
EDIT: I tried with the bracket and it worked. I use Mozilla Firefox version 58.
im really new to this but heres my problem. I need to upload a pic onto my website (im using aptana studios 3). So i save my image as jpeg and use the code:
now it acknowledges that I am uploading the picture but it won't load. Do i have to convert the image or save it a certain way?
Oh buddy, make sure to post the code you're having issues with. In any case, it doesn't really matter what file extension you use (though .png may be the best for web). I'm assuming this is hard-coded HTML, if that is the case, I would use a simple <img /> element to display a picture. Make sure the image is saved in a nearby directory.
<div>
<div class="item"><img src="./example.png"/></div>
</div>
In the example above, example.png is located in the same folder as my index.html file. We use the attribute src, not href. An href attribute dictates what page is to be loaded when an element, e.g. an <a> element, is clicked on. If you have a CSS stylesheet, it might be preferable to load the image as a background-image to a <div> element, so that it would be easier to manipulate image properties like height and width. An example of that would be:
<div>
<div class="item"/></div>
</div>
..and the CSS:
.item {
background-image: url("boxes.png");
width: 800px;
height: 600px;
background-size: contain;
}
Here, I set the image's height and width, and tell my styles that I want the whole image to be show with background-size: contain;.
I hope this helps.
Not sure what I'm doing wrong here, but I've tried following the example on the relevant w3schools page, but to no avail. So here's what I have so far:
I have four images on my index page, called index1.png, index2.png etc. I combined them into a single png, which is simply index.png. That's my sprite image. I also have a 1x1 transparent image, which is the placeholder for each image in the HTML. Here is the image code:
<img class="index1" src="Images/trans.png" alt="alt" title="title" width="40%" />
And the CSS:
img.index1 {
width:258px;
height:300px;
background:url(Images/index.png) 0px 0px;
}
Testing the page out, I get nothing more than a resized transparent image. The image I want displayed does not show up.
EDIT: Solved. I was an idiot and forgot to go up one directory in my CSS, since my CSS was in a folder on the root. The proper path was "../Images"
Are you sure the path to your images folder is correct? Make sure your path for your sprite is relative to your CSS file, not from where the CSS file is being linked from.
If you had a folder structure like this:
/index.html
/css/style.css
/images/sprite.png
/folder1/index.html
/folder2/subfolder2/index.html
The correct path to use in your CSS file would be this: ../images/sprite.png.
The path would be the same in your CSS file regardless of which index.html file that you would be including it from in the example above.
First and foremost, seeing as though you're using a sprite <img> isn't the correct tag. A div will suffice here. You also don't need to target HTML in your CSS as you've set a class. Try...
<div class="index1"></div>
Also your image url is missing quotation marks.
.index1 {
background-image:url('Images/index.png');
background-position: 0 0;
height:300px;
width:258px;
}
Try using an element other than <img>. A <div> element should work fine.
<div class="index1" alt="alt" title="title" ></div>
And the CSS:
.index1 {
width:258px;
height:300px;
background:url(Images/index.png) 0px 0px;
}