How do i call an image from a folder using css - html

I am trying to call an image from a folder using css.
I have tested the css with background color, so i know it is linked and working properly.
what I've tried:
I have tried to call an image from outside the image folder.
I have tried to change the image type to png.
And i have tried a different image.
html
<section id="hero">
<div class="hero container">
<h1>testing</h1>
</div>
</section>
css
#hero{
background-image: url(img/Computer_repair(1).jpg);
}

Your code works (see fiddle) so I'm assuming you just have the image path wrong.
So when you say...
#hero{
background-image: url(img/Computer_repair(1).jpg);
}
...that means where ever your css file is saved, there also needs to be a folder called img and inside that folder is where you need to put Computer_repair(1).jpg

Your code looks fine. I suspect there's a problem with the image path. Try this:
background-image: url('/img/Computer_repair(1).jpg');

The problem was it was not working with the (1).
I Needed to change from Computer_repair(1).jpg to Computer_repair_1.jpg
HTML
<section id="hero">
<div class="hero container">
<h1>testing</h1>
</div>
</section>
Css
#hero{
background-image: url(img/Computer_repair_1.jpg);
}

Related

Is it an image file issue or size issue? HTML CSS background image question

I keep trying to use different images as a background but I am unlucky so far in figuring out if it is an issue with the photo file size or is there something wrong with the pictures i use? Asking since i tried with one image and the background image shows and works but any other picture that I want to use will not show up or work properly even though I have looked over my code multiple times and it is correct. Here is my current code
<!DOCTYPE html>
<html>
<head>
<title>Winston Berz</title>
<style>
body {
background-image: url("C:\Users\apere\OneDrive\Desktop\HTML Progress\Winston Berz\All Photos\img5.jpg") no-repeat center center fixed;
min-height: 100%;
background-size: 100%;
}
</style>
</head>
<body>
<div id="Navbar">
<nav>
Main
About Me
Contact
Photos
</nav>
</div>
<div id="Main Title">
<header>
<h1>Winston Berz</h1>
</header>
</body>
</html>
Want to also note that I also was using a separate document for css and got the same results so this time I resorted to internal css.
Help! Please and thank you I am still relatively new to coding.
you could try to clear your browser cache (here is how) maybe the browser is storing previous images.
Also, you could consider creating a <div> and place your background images there instead of setting the image inside css.
inside the <body> tag you can add
<div class="background-images-wrapper">
<img src="image/link/path" alt="background1"><img>
</div>
and inside your css style sheet you add this
.background-images-wrapper{
height: 100%;
width: 100%:
object-fit: cover;
z-index: -1;
z-index: -1 is to make sure that your images will always stay behind the rest of your elements

how to set background image url for local files?

I want to paste a relative image url to a div to set it as the background image. Unfortunately the div won't render the image. So this works fine and renders the image
<img src="../assets/images/HeroImg.jpg">
but this one doesn't
<div style="background-image: url(../assets/images/HeroImg.jpg)">
Content goes here
</div>
Things I also tried:
wrapping the url inside single quotes
assets/images/HeroImg.jpg maybe?
./assets/images/HeroImg.jpg starting from the src folder
images/HeroImg.jpg and ./images/HeroImg.jpg starting from the assets folder
What is the correct url to use for background images?
Update
I'm using VueJs so things might be different here? Steps to reproduce:
Create a new project using the Vue CLI
Create a images directory in src/assets
Create an image in src/assets/images and call it HeroImg
Update App.vue file with
.
<template>
<div id="app">
<div>
This works:
</div>
<div>
<img src="./assets/images/HeroImg.jpg">
</div>
<div>
This doesn't work:
</div>
<div style="background-image: url('./assets/images/HeroImg.jpg')">
Content without background image
</div>
</div>
</template>
You will see that the img tag renders the image but not the div with the background image.
Terry's answer did the trick but I needed an extra set of parentheses around the url tag content:
computed: {
heroImage() {
return {
backgroundImage: `url(${require('../assets/images/HeroImg.jpg')})`
};
}
}
When you're using relative paths, Webpack is unable to resolve them properly if they are found inside your inline style attributes. Webpack, can, however, resolve the image path properly if it is use as an <img> element source in the template directly. Therefore, the solution to use a resolved image path as a CSS attribute is to simply reference it as a computed property.
In your template, you can use v-bind:style="heroImage" to reference a computed property:
<template>
<div id="app">
<div v-bind:style="heroImage">
Content without background image
</div>
</div>
</template>
Then, in your VueJS component itself, you can do:
computed: {
heroImage() {
return {
backgroundImage: `url${require('../assets/images/HeroImg.jpg')}`
};
}
}
html
<div class="yourDivClass">
Content goes here
</div>
css
.yourDivClass {
background: url('../assets/images/HeroImg.jpg') no-repeat center center / cover
}
You should wrap them with quotes.
From MDN, we need to wrap the path or url of the image into a
background-image: url("../../media/examples/lizard.png");
<div style="background-image: url(../assets/images/HeroImg.jpg)">
Content goes here
</div>
Suggestion:
Better to avoid the inline styles. you can include the style in an external sheet.
I think you have not specified height and width property.
div {
width: 60px;
height: 60px;
border: 1px solid black;
}
<div style="background-image: url(https://s3.amazonaws.com/media.skillcrush.com/skillcrush/wp-content/uploads/2017/04/Blog_coding-game.jpg.webp)"></div>
Try in css file like this
background-image: url('~src/assets/home-page-img/header-bg.jpg');

why background-image property is not working?

I've index.html file and img folder residing in the same directory,
I want to have the background image in div with .img1.
so I'm doing something like this :
Index.html
.img1 {
background-image: url("img/bg-header.jpg");
position: relative;
background-size: cover;
background-repeat: no-repeat;
background-attachment: fixed;
}
<div class="img1">
<div class="ptext">
<div class="dark-overlay">
<div class="home-inner text-center">
<h2 class="display-4 text-center">PULSES</h2>
<br>
<p> HALUTZIM 26 TEL AVIV<br><br>+4410600</p>
<br>
<br>
<div class="arrow">
<i class="fas fa-chevron-down"></i>
</div>
</div>
</div>
</div>
</div>
this should set the background image of the div, but it is not working ?
Note:
As I mentioned index.html style.css and img folder are residing in the same directory, I've images inside img folder.
Am I doing something wrong ?
Please help thank You
Try to render the image as an in-line image in your page using tag just to confirm that the path is ok. If the path is ok, check the div's width and height then play around with background-postion property.
If still not working, post your html head.
I would try background-image: url("../img/bg-header.jpg");
Complementing my answer with Wayne's good explanation in the comments below:
"the relative path from a CSS file is based on its location. Thus the same CSS file can be used for HTML files in different locations. The css file is not in the same directory as the html. Hence ../ or /img/bg-header.jpg if the /img/ is off the root www directory."

Auto adjust my background image size

I've been googling for awhile and none of the answers seem to match my need, need someone to help me with this, thanks.
my personal website is: http://simonykhsu.com for refrences
my code for the background image is
<div class="landing-header" style="background-image: url('skitrip_owlshead.jpg');">
i've tried implementing this background image code but i cant find the section in css file to make the background go skin color
<div id="image-container">
<img id="image" src="skitrip_owlshead.jpg" alt="middle"/>
</div>
and also the second code above doesnt seem to bring my image to the middle...
for centering the image and set backgroud color you can do this in the image-container div
<div id="image-container" style="text-align:center; background-color:#ccc;">
<img id="image" src="skitrip_owlshead.jpg" alt="middle"/>
</div>
#ccc is a sample color ... you set with your color code..
I'm sorry, but I don't really understand what it is that you're trying to accomplish.
Couple of heads-ups tho:
its better to create a seperate CSS file, instead of using inline-styling. Make a file called style.css and put your CSS in that. Put this in the <head> section of your website:
<link rel="stylesheet" href="style.css" type="text/css">
The alt="middle" is the alt-text. It's not used for styling
(centering) your image, but to describe your image. Something like
"skiteam owlshead team" should be good.
If you want to center the image and put 'skin color' right and left to it, put this in your style.css:
#image-container {
background-color: #FFFCF5;
}
#image-container img {
text-align:center;
}

Background Image not displayed in html

<body>
<div>
<div class="page1">
</div>
</body>
.page1{
background-image:url(../images/1.jpg);
background-size:cover;
background-position:center;
width:100%;
height:100%;
display:block;
position:relative;
}
This is my code for setting a background image for a webpage, but unfortunately it's not displayed. Can someone help me correct this code?
Ok I understand now, you need to do
html, body{
height: 100%;
width: 100%;
}
Background is not showing because your div needs content.
2 options:
You can set the background for body instead.
body{
background-image:url(../images/1.jpg);
}
Or set the height of the div to the height of the image
First of all you need to put a closing </div>
<div>
<div class="page1"></div>
</div>
The problem now is tha your <div class="page1"></div> is emptry. You need to put some elements inside so that the image can be displayed.
DEMO
Maybe you html document is not well formed.
Try this:
<html>
<head>
<-- style block have to be contained within a <style> tag -->
<style>
.page1{
background-image:url(../images/1.jpg);
background-size:cover;
background-position:center;
width:100%;
height:100%;
display:block;
position:relative;
}
</style>
</head>
<body>
<div>
<div class="page1">
</div>
</div> <-- this tag was missing in your question -->
</body>
Second possibility, your image is not properly linked. The way it is written, it is in a folder 'images' parrallel to the one you html document is hold. So, find what relativity there is between your document and the image and try modifying it's source url(../images/1.jpg); .
When defining the path to another object, I find it easier to define the file path using ~/f1/f2/file rather than trying to work from the current directory using ../f1/f2/file. What the ~ indicates is to start at the top level directory and work its way down the file structure. Much easier.