I've been trying to add an image to Wordpress template, when I add a tag it auto adds display: none; to it when it appears on the site. So I decided to add it as a css image with div.
I've added this to the CSS:
.myad a{
background-image: url(http://www.henstagweekends.co.uk/images/advert.png);
background-repeat: no-repeat;
display: block;
height: 248px;
width: 189px;
z-index: 100000;
}
I've added this to the footer.php just before the tag:
<div class="myad">
</div>
I've added a temporary bg colour to show where it is. Look at the very bottom of the page.
http://www.henstagweekends.co.uk/
Any idea what is causing this?
url('URL') refers to path where images are located. Try download the image to your folder and reference it: background-image: url('<path>/advert.png')
Related
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
I want to set a background-image, but it doesn't show up on my site. I have tried to set display: block; but that didn't work.
body {
background-image: url("images/other/background.png");
margin: 0;
}
You probably have the wrong path. If your CSS file is inside /css and your image file is inside /image you should use
background-image: url("/images/other/background.png");
How do I write the right adress, the code is:
.slide1 {
background: url(http://media.dunkedcdn.com/assets/prod/40946/580x0-9_cropped_1371566801_p17tbs0rrjqdt1u4dnk94fe4b63.jpg)no-repeat center;
}
How do I put a image from my resource file? I tried background-image: url("pic1.jpg") -that's the right address- and it doesn't work.
What I do is I put the images from a slideshow in css and put a simple cod afterwards in html to display it.
You have to pass a width and a height in order to make it appear. Try it like this:
.slide1 {
background: url('http://media.dunkedcdn.com/assets/prod/40946/580x0-9_cropped_1371566801_p17tbs0rrjqdt1u4dnk94fe4b63.jpg') no-repeat center;
width: 200px;
height: 200px;
}
Edit:
If the image is in the same directory where your css file is, simply use:
background: url('nameOftheFile.jpg') no-repeat center;
Also this thread may be interesting for you: How to go up a level in the src path of a URL in HTML?
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
First while I was styling the css I realized I didn't create a folder for it, so I decided to create a folder for css. Which I named screen.css but right after creating the css folder my images stopped showing. I have check the spelling and the tag but nothing seems to help. I did change link tag from screen.css to css/screen.css
Everything was working fine until I created a folder for the css so I'm guessing the problem might lay there.
An example of the html
body
{
background: url(images/wallpaper.png);
background-repeat: repeat-y;
margin: 0;
background-color: #e4c17f;
font-family: 'Nova Square',helvetica, sans-serif;
}
#banner
{
width: 900px;
background-color: #a65900;
margin: 0 auto;
height: 150px;
background: url(images/banner.jpg);
}
#footer
{
width: auto;
background-color: #a65900;
height: auto;
background: url(images/name.jpg);
}
You created the folder CSS therefore probably need to reference the images from your CSS relatively to the images folder...
A relative path is the path to a file from the current directory.
-- images
---- wallpaper.png
-- css
---- screen.css
body {
background: #e4c17f url(../images/wallpaper.png) repeat-y;
}
Try this :
The Browser will start looking for the image from the folder where you have kept your css
background: url(../images/wallpaper.png);
It worked! :D
I changed the tag to:
background: #e4c17f url(../images/wallpaper.png);