I've tried multiple different ways but none displayed the image as background.
CSS
.spec{
background: url('white_logo_red_font.jpg');
height: 100px;
width: 150px;
}
HTML
<div class="spec">
hi
</div>
The image is in the same folder so the url is correct. I've also tried background-image instead of background.
Edit: image location
index.js is where the code is.
That is probably caused by the wrong image path.
Try using link from the web, for example: background: url('https://via.placeholder.com/350x150') the image should be displayed - that means that your css syntax is fine.
Then fix your path, you probably have to add './', '/images/', '../images/' before "white_logo..." the image path have to be relative to the css file.
try,
CSS
.spec{
background: url('../white_logo_red_font.jpg');
height: 100px;
width: 150px;
}
HTML
<div class="spec">
hi
</div>
I have noticed that there is something wring with the background image url background: url('white_logo_red_font.jpg'); use correct url.
You can try my code.
.spec {
background: url(https://images.unsplash.com/photo-1578163246111-e02c555d00e1?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=334&q=80);
height: 100px;
width: 150px;
background-size: cover;
background-position: center;
}
<div class="spec">
hi
</div>
Related
I am new to JS and I'm making a game in HTML5/JS, and I need to set a background image for a div that is nested in another div, without overflow. I put the background-image property on the element, but the background is not appearing.
I haven't been able to find any other examples of this online, or how to fix it. The background-image property is showing up in the browser, and the file paths are correct.
HTML:
<div>
<div id="DivId" class="DivClass">
</div>
</div>
CSS:
.DivClass {
background-color: rgba(20, 20, 20, 0.75);
background-repeat:no-repeat;
background-size:47%;
background-position: center;
background-repeat: no-repeat;
}
#DivId {
background-image: url(../InventoryAssets/Key-trimmy.png);
}
In my opinion you should keep the file in the same folder in which you html file is there and then try it for example
#DivId {
background-image: url(Key-trimmy.png);
}
I hope this helps you
or try
document.body.style.backgroundImage = "url('Key-trimmy.png')";
you can also add image in body tag in html
<body style="background-image: Key-trimmy.png;">
I suggest giving a height value to the div. Background images are not HTML content themselves.
For example:
#DivId {
background-image: url(../InventoryAssets/Key-trimmy.png);
height: 500px;
}
I am trying to place a background image to a tag, when I set the image link in background-image:url it is not showing me the image as background. This is my code, what could I be doing wrong?
<a
href="#"
data-toggle="lightbox"
title="Instagram"
style="
width: 400px;
height: 400px;
background-image: url('https://scontent-atl3-2.cdninstagram.com/v/t51.2885-15/275180538_484682353010222_2402478995051705385_n.jpg?stp=dst-jpg_e35_s640x640_sh0.08&_nc_ht=scontent-atl3-2.cdninstagram.com&_nc_cat=102&_nc_ohc=fTObVsU65g8AX8x2Wuy&edm=ABfd0MgBAAAA&ccb=7-4&oh=00_AT-oNSMzXpDYHz0_nSlywYBoscNl37e8kWF8dEe3-4zxWA&oe=625818CB&_nc_sid=7bff83') !important;
"
>
<div class="photo-box-content">
<span>Instagram223424</span>
</div>
</a>
I Assume you are trying to load image from instagram or facebook content because of the URL. It is not allowed to be load like that, try saving the image locally that's the quickest solution.
I will only recommend you to assign the background image locally. First, download the image and then, add it to your code main file. The main problem while you import the url is, if the image of the url is deleted by any reasons, your webpage will not display the image anymore. So, you should download it and then add it to your code main file. Then, rename the picture to a short name (recommended). Then you should code like this 👇
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.body {
width: 100%;
height: 100vh;
/*locally from the device*/
background: url('example.jpg');
/*to adjust the image perfectly according to the device*/
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center;
}
<body>
<div class="main">
<div class="body">
<h2>This is a heading</h2>
</div>
</div>
</body>
This is the method which I was following for the past few months. Hope it will help you ☺.
I found the same reference with this question, here's the link:
Visit instagram style explore page image list with CSS
So here's the problem - i need an image to slightly change when the cursor is hovering on it. However, simply writing something like this in CSS styles:
img {src="";} img:hover {src="";}
seems to do nothing. Is there a solution to this problem using only HTML and CSS?
Thank you for your time!
You can use background-image property and change the url on hover
img {
height: 200px;
width: 200px;
background-image: url("https://pixy.org/src/477/4774988.jpg");
background-size: 200px 200px;
;
}
img:hover {
background-image: url("https://pixy.org/src/19/193722.jpg");
}
<img />
Details : Using Atom File Editor with Mac OS X, Making a new site on localhost and after saving it I check changes on chrome browser. Right now i have come across a problem which causes the image to not show up on the website while i was trying to set background image of a section tag in CSS.
Problem : I am trying to use the stellar.js parallax plugin and for that i need to set the background property of the section tag to an image of my choice. The problem is that when i use "background : url(parallax1.png);" the image does not show up on the website and only a white blank space is shown.
HTML File :
<!-- Attempting Parallax Here -->
<section class="parallax1 pic1">
</section>
<!-- Ending Attempt Here -->
CSS File :
.pic1
{
background : url(parallax1.png);
}
.parallaxcontent
{
background-attachment: fixed;
background-repeat: no-repeat;
position: relative;
background-size : cover;
width: 100%;
height: auto;
}
Points You Should Know :
the image parallax1.png is in the same directory and i have checked the spelling, which is correct.
I have also tried using background-image: instead of background: .
If i use < img src="parallax.png" /> the image shows up perfectly
i have tried to encase parallax.png in '' as well as "".
Any help would be appreciated,
Thanks.
Generally, you should have some content within the section tag or you can set in .pic1 class
min-height:200px;
Try background : url("parallax1.png");
Read more here
CSS background Property
take a look
html
<section class="parallax1 pic1">
</section>
css
.pic1
{
background: blue url("https://static.xx.fbcdn.net/rsrc.php/v2/y6/r/QDLPxJ5bMSg.png");
width: 100px;
height: 32px;
border:1px solid #000;
}
.parallaxcontent
{
background-attachment: fixed;
background-repeat: no-repeat;
position: relative;
background-size : cover;
width: 100%;
height: auto;
}
working Fiddle
I made a CSS sprite using this online site. Here are the files I'm using. This is what I have right now in my HTML markup:
<img width="1" height="1" src="data:image/gif;base64,R0lGODlhAQABAIAAAP///////yH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" alt="" title="" class="e-shop" />
Since src can't be null I set a empty GIF in base64. Now, the problem is that the sprite.png file isn't loaded. So I modified the original code changing to this:
.contactenos, .contactenos-1, img.e-shop, .e-shop-1, .faq, .faq-1, .fctjur, .fctjur-1, .fctnat, .fctnat-1, .vendidos, .vendidos-1{
background: url(sprites.png) no-repeat;
}
But it's not working, maybe I'm doing something wrong, it's the first time I did this, any advice or help?
Test 1
I made some changes to the original CSS as follow:
.contactenos, .e-shop, .faq, .fctjur, .fctnat, .vendidos {
background: url(sprites.png) no-repeat;
}
.e-shop{
background-position: -198px -2px ;
width: 128px;
height: 50px;
}
.e-shop:hover {
background-position: -200px -56px ;
width: 128px;
height: 50px;
}
But still not working, is the problem the tiny default src image?
If that's your entire CSS, then you're missing a few things. Here's a fiddle using your markup and CSS (with a hard coded background image):
http://jsfiddle.net/5jvdmzgc/
You'll need to specify your elements width and height (right now, they're 1x1) and also the offset of the background image (if any).
Updated CSS:
width: 150px;
height: 50px;
background-position: -70px -120px;
Updated fiddle with different sizes specified:
http://jsfiddle.net/5jvdmzgc/1/
You can use the CSS you wrote as a "base" (specifies the image source), and then extend that with individual classes (width/height/bg offsets).
Hopefully this helps!
Your gif is only 1px by 1px. So your bg image is not going to be visible. You'll need to either set the dimensions in your css or provide a gif with the correct dimensions.
For example if your background image/sprite was 50px by 50px you could do this:
img.e-shop {
width: 50px;
height: 50px;
}
or
<img class="e-shop" src="
R0lGODlhMgAyAIAAAP///wAAACH5BAEAAAAALAAAAAAyADIAAAIzhI+py+0Po5y02ouz3rz7D4biSJbmiabqyrbuC8fyTNf2jef6zvf+DwwKh8Si8YhMKicFADs=
" />
Fiddle