I'm new to Wordpress theme development.
i was trying to convert a static html theme to wordpress but my background image is not working here's the code
<div class="hero-slides owl-carousel">
<!-- Single Slide -->
<div class="single-hero-slide bg-img background-overlay" style="background-image: url(http://localhost/wordpress/wp-content/uploads/2018/07/bg1.jpg);"></div>
<!-- Single Slide -->
<div class="single-hero-slide bg-img background-overlay" style="background-image: url(http://localhost/wordpress/wp-content/uploads/2018/07/bg2.jpg);"></div>
</div>
when i inspect element the background-image url() shows empty.
the static html page works just fine.
First Check that all the JS and CSS files for the slider, are loaded correctly in the page.
To get the path to theme directory use <?php bloginfo('template_directory'); ?>
Then in your html you can use this as the path to the image
<div class="single-hero-slide bg-img background-overlay" `style="background-image: url(<?php bloginfo('url'); ?>/wp-content/uploads/2018/07/bg1.jpg);"></div>
My guess is that this is an issue with loading of js files, double check by debugging the console for errors from developers tools in the browser.
Sorry guys false alarm. the problem was with my editor. It wasn't saving the php file. I restarted my pc had to re-enter the image path now it worked.
Related
would appreciate some help here, my img html tag has the correct file path. However, when I launch the express server and try to view the image on vscod Browser Preview, I cannot see it (example picture in the link below). What could be the problem?
<div class="dashboard"><!--Dashboard START-->
<section class="navigation"><!--Navigation START-->
<img src="imgs/iHome.png" alt="">
</section><!--Navigation END-->
This is a picture of the html file along with the directories on the left and the html img tag in the middle, and the Browser Preview with the missing image on the right
The App needs a src folder that has a sub folder assets. your Frontend js should be hosted in the src folder.
put your image in the src -> assets -> images/pic01.jpeg
then call it like this:
<img src="assets/images/pic01.png" alt="">
Trying to add the 4 dry out logo to this html template. Can anyone correct what I did wrong? It shows this on the site:
This is a very small section of the code where I have the image placed in the body.
<body>
<!-- Loader -->
<div id="loader-wrapper">
<div id="loader"></div>
<div class="loader-section section-left"></div>
<div class="loader-section section-right"></div>
</div>
<!-- Page Content -->
<div class="container-fluid tm-main">
<div class="row tm-main-row">
<!-- Sidebar -->
<div id="tmSideBar" class="col-xl-3 col-lg-4 col-md-12 col-sm-12 sidebar">
<button id="tmMainNavToggle" class="menu-icon">☰</button>
<div class="inner">
<nav id="tmMainNav" class="tm-main-nav">
<ul>
<!--ERROR IMG --> <img data-image="4 Dry Out Logo.jpg" alt="4 Dry Out Logo">
<li>
Unless there is other code acting on your img tag, you need to use the src attribute to specify an image URL. Spaces in the image name could also be causing an issue.
You'll want to open up your web browser's developer tools and see if you can see where the image is requested in the network tab. If the URL is returning a 404 error, you know that there is an issue with your image's path. If the request for the image isn't being made at all, then there is an issue with your img tag or the code that is supposed to cause the request for the image to be sent.
<img data-image="4DryOutLogo.jpg" alt="4 Dry Out Logo">
First you need to consider renaming the image and remove white space from the name.
Second , you have to use the code as below
<img src = "../yourimagename.jpg">
Finally ,
You have to make sure that your image exist with in the server path.
I suggest you to first open the image via url link , once its open copy paste that url into the src code .
Good luck
I am a beginner with regards to CSS and HTML but have searched everywhere for a solution to this and still have no idea what is going on.
I am attempting to create a background image with a logo/subtitle on top of it. Although only the subtitle and alt text is showing up. I have gone over the syntax multiple times and am still unsure of where the error is as I am declaring the correct css specifications from what I can tell.
#HTML:
<div class="blog-type-wrapper">
<div class="blog-type-img-background" style="background-image:url(images/software.jpg)"></div>
<div class="img-text-wrapper">
<div class="logo-wrapper">
<img src="images/software-logo.png" alt="soft">
</div>
<div class="subtitle">
Software N Stuff
</div>
</div>
</div>
#CSS
.blog-type-img-background{
height:500px;
width:100%;
background-size:cover;
background-position:center;
background-repeat:no-repeat;
}
There is space on the web page allocated to the image, however no images appear. The images are in another folder named "images" in the same directory as both the html and css files. This is occurring in a PHP file, I have attempted researching if that makes a difference in comparison to HTML file, and have found nothing but I cannot see how it would make a difference with regards to this issue.
Edit
The file path was incorrect. Thank you to #Heretic Monkey and others
"Look at the Networking tab of your browser's developer tools and look for any errors, like a 404 with the image's file name. That will show the full URL to the image it's trying to load. It's likely incorrect, relative to the HTML file. Fix that"
After looking in the networking tab I realized that my file path was incorrect and changing it to style="background-image:url(wp-content/themes/my-theme/images/software.jpg)"> worked in loading the image as expected.
Change
style="background-image:url(images/software-logo.png)"
to
style="background-image: url('images/software-logo.png');"
Also, depending on where your images folder is located, you might need a / before, like this: /images/software-logo.png.
The result would be this:
<div class="blog-type-wrapper">
<div class="blog-type-img-background" style="background-image: url('images/software-logo.png');"></div>
<div class="img-text-wrapper">
<div class="logo-wrapper">
<img src="images/software-logo.png" alt="soft">
</div>
<div class="subtitle">
Software N Stuff
</div>
</div>
</div>
Source should contain either /, ./, or ../:
In case the image folder is in the absolute root path, you should use /images/image.png
If it's in the same directory as the current file's location, then use ./images/image.png
If it's in an upper folder, use ../images/image.png
<!-- First Parallax Image with Logo Text -->
<div class="bgimg-1 w3-display-container w3-opacity-min" id="home">
<div class="w3-display-middle" style="white-space:nowrap;">
<span class="w3-center w3-padding-large w3-black w3-xlarge w3-wide
w3-animate-opacity">Lori
<span class="w3-hide-small">Roberg</span> - Web Designer and
Developer</span>
</div>
</div>
/*css code*/
/* First image (Logo. Full height) */
enter code here
.bgimg-1 {
background-image:url('images/flpic.png');
min-height: 100%;
}
I can not get the flpic.png background image to display.I have tried many different urls - such as - ('/images/flpic.png'), ('../images/flpic.png') and the one above. My file structure is HTML5 index.html, style.css and a folder named images.
Try this. I think the property is background
.bgimg-1 {
background:url("/images/flpic.png");
}
With the way URLs need to be structured, try the following:
Current Directory: ./
Back Directory: ../
Forward Directory: /
My suggestion is to use url(./images/flpic.png)
I have noticed something from the link you provided. They have used custom css file. Add the following code inside your if your haven't added it.
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
I am trying to add a logo to my webpage. I am using CSS and eclipse. The image shows as a broken image and I am not sure why. The image I am trying to use is in the folder specified :
Does it need to be added in CSS or can someone please help me to know where I am wrong. Thank you.
<body>
<div class="jumbotron">
<h2 style="text-align: center; color: white;"> New Plan </h2>
<a href="#">
<img src="resources/img/logo.png">
</a>
</div>
</body>
This wouldn't be a css issue if the browser is showing the broken link icon. That icon means the path to the file is incorrect or it can't retrieve it.
To confirm this, take resources/img/logo.png and add it to the end of the URL where your HTML is, excluding any files. For instance, if your URL is http://example.com/index.php, you want to make the URL read as http://example.com/resources/img/logo.png, without the index.php.
You will need to tweak this URL until the image shows up in the browser, since you didn't provide a URL where the HTML is running. When that happens, the URL in the address bar is the one you can use for the image URL.