I know people been asked similar questions but I couldn't find the right answer for my issue. So I am asking public to help with my issue. I have a img folder and i have a search.png image in it. Its a search icon that I am trying to use it for my youtube search API page. So the problem that I am having is when I put the search.png to my background: url(../img/search.png) its not showing up at all, instead its empty square box. I will attach my code below. Please dont dislike my issue question I really need an answer.
*{
padding:0;
margin:0;
}
body{
font-family:"Segoue",sans-serif;
line-height:2em;
color:#000000;
background:#e1e1e1 url(../img/red.jpg) fixed;
background-repeat: no-repeat;
/*background-position: cover;*/
background-size: cover;
font-size:13px;
}
a{
color:#333;
text-decoration:none;
}
#container{
/*height: 100px;*/
width:740px;
background:#f4f4f4;
opacity: 0.9;
margin:auto;
margin-top: 300px;
/*border: 2px solid black;*/
}
.clearfix{
clear:both;
}
header{
padding:30px 20px;
background:#f4f4f4;
}
header h1{
color:#001373;
margin-bottom:5px;
}
header span{
color:#000000;
border: 1px solid black;
border-radius: 5%;
background-color: #007EFF;
padding: 8px;
}
section{
padding:30px 20px 20px 20px;
}
footer{
padding:20px;
background:#f4f4f4;
text-align:center;
}
#search{
display: block;
margin-bottom: 15px;
}
.fieldcontainer{
display: block;
position: relative;
width: 90%;
margin: 0 auto;
}
#search-btn{
position: absolute;
right: 360px;
top: 5px;
height: 32px;
width: 32px;
border: 0;
cursor: pointer;
zoom: 1;
filter: alpha(opacity=65);
opacity: 0.65;
background-image: transparent url(../img/search.png) top-left no-repeat;
}
#search-btn:hover{
filter: alpha(opacity=90);
opacity: 0.9;
}
.search-field{
box-sizing: border-box;
display: block;
width: 45%;
padding: 7px 17px;
padding-right: 43px;
background-color: #BBB3F7;
color: #75026C;
font-weight: bolder;
border-radius: 1px solid black;
font-size: 1.6em;
border-color: #00B5ED;
border-radius: 1px;
box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
cursor: default;
} <script src="js/script.js"></script>
</head>
<body>
<div id="container">
<header>
<h1>Search<span>Vidz</span></h1>
<p>Search all Youtube videos</p>
</header>
<section>
<form id="search-form" name="search-form" onsubmit="return search()">
<div class="fieldcontainer">
<input type="search" id="query" class="search-field" placeholder="Search YouTube...">
<input type="submit" name="search-btn" id="search-btn" value="">
</div>
</form>
<ul id="results"></ul>
<div id="buttons"></div>
</section>
<footer>
<p>Copyright © 2014, All Rights Reserved</p>
</footer>
</div>
</body>
</html>-
What's the path of the CSS file?, or are you adding styles directly on the HTML file?Jesus Lugo– Jesus Lugo2017年04月30日 05:17:11 +00:00Commented Apr 30, 2017 at 5:17
-
No its in the css folder and im getting out of folder first by adding two ..agzamovich– agzamovich2017年04月30日 05:22:15 +00:00Commented Apr 30, 2017 at 5:22
-
just to have things clear, CSS is into css folder, which is sister folder of img, right?Jesus Lugo– Jesus Lugo2017年04月30日 05:24:34 +00:00Commented Apr 30, 2017 at 5:24
-
My style.css is inside the css folder and my search.png is is in the img folderagzamovich– agzamovich2017年04月30日 05:25:56 +00:00Commented Apr 30, 2017 at 5:25
-
but both folders, img and css are siblings?, are those at the same hierarchy level?Jesus Lugo– Jesus Lugo2017年04月30日 05:26:50 +00:00Commented Apr 30, 2017 at 5:26
3 Answers 3
check the image file extension!
Sign up to request clarification or add additional context in comments.
5 Comments
agzamovich
Its not extension problem
MHD Alaa Alhaj
when I open console I found this issue
GET http://stacksnippets.net/img/search.png 404 (Not Found) just to make sure that you are putting the extension in a right way, put the image file beside the page file and use this extension url(search.png)Asons
@AlaaMh Of course you do, the image path is local to his server, not to stacknippets
agzamovich
It says on my console "invalid property value" for the background: url(search.png) –
agzamovich
i figured out thanks it was a top-left that dash in between top left
You write "search.jpg" in your code. Change to "search.png"
answered Apr 30, 2017 at 5:19
Ashiqur Rahman
4247 silver badges21 bronze badges
4 Comments
agzamovich
Its search.png on my actual code idont know how I submitted as jpg lol
Ashiqur Rahman
can u share your actual page? Is it on the online server?
Ashiqur Rahman
As your image resource isn't included in the snippet. It's difficult to understand. Can you send the full project(zip) ?
agzamovich
i got it it was a dash problem in between top-left
The issue is syntax, you have background-image: transparent url(../img/search.png) top-left no-repeat;, but all properties should be assigned to the shorthand background:, background-image expects only the image (url). Additionally, the position should not be "top-left" but "top left" (two words)
Correct version of that line should be:
background: transparent url(../img/search.png) top left no-repeat;
Hope this helps
answered Apr 30, 2017 at 5:33
Jesus Lugo
7956 silver badges17 bronze badges
6 Comments
agzamovich
I know I stied both background: and background-image. No luck
Jesus Lugo
If you want to use background-image, you'll need several lines:
background-color: transparent; background-image: url(../img/search.png); background-position: top left; background-repeat: no-repeat;Jesus Lugo
You can use the browser inspect tools, focus on the
#search-btn element, and hover on the image URL, if the browser says that could not find image, is a path issue; otherwise there are chances to be syntax or CSS itself, for instance, I won't recommend having the button positioned using right: 360px, because .fieldcontainer and .searchfield both have percentage width, I'd recommend use a shorter value, instead of right: 360px, using left: 5px, so to speak.agzamovich
It says on my console "invalid property value" for the background: url(search.png)
agzamovich
OMG finally i figured out its crazy man the problem was " - " in between top-left. there is not supposed to be a dash in between.
|
lang-html