0

I would like to replicate Google's front-end for practice purposes. I am struggling with including the 'search icon' in the Google search bar.

On other articles, I read about the background-image property, which I have included. However, my image is quite big in pixels. I have included an addition '5px' to emphasize that the icon should be smaller. However, I can't see the icon when I do this.

Could someone explain how I would go about doing this?

input[type=text] { background-image: url(https://upload.wikimedia.org/wikipedia/commons/thumb/7/7e/Vector_search_icon.svg/1200px-Vector_search_icon.svg.png) 5px; outline: none; width: 40%; padding: 8px 25px; border: 1px solid #DDD; border-radius: 25px; margin: 20px; }
<div> <ul class="nav justify-content-end"> <li class="nav-item"> <a class="nav-link" href="image.html">Image Search</a> </li> <li class="nav-item"> <a class="nav-link" href="advanced.html">Advanced Search</a> </li> </ul> </div> <container> <div class="image-box"> <center> <img alt="Google" height="92" src="https://assets.stickpng.com/images/580b57fcd9996e24bc43c51f.png"> </center> </div> <div> <center> <form action="https://google.com/search"> <input type="text" name="q"><br> <input type="submit" value="Google Search"> <input type="submit" value="I'm Feeling Lucky"> </form> </center> </div> </container>

Thanks in advance!

Improve this question
1

3 Answers 3

Reset to default
1

Adding a background size like this doesn't work. The reason why is that the background-image property does not support putting background sizes. It just supports links to images, and gradients themselves.

However, there's an entire property waiting there for you - it's called background-size.

You basically specify the width and the height of the background size in this property. You can also use the cover and contain keywords here also.

So in your case you need:

background-size: 5px 5px;

However, you might notice a problem - there are lots of search icons. I would expect that you don't want this to happen. Just add this:

background-repeat: no-repeat;

You can also position it like this (adjust to your liking)

background-position: 10% 10%;

If you want to put all this in the same property, you could look up the shorthand background property for all these values, but some would argue this makes it much harder to read the code.

input[type=text] { background-image: url(https://upload.wikimedia.org/wikipedia/commons/thumb/7/7e/Vector_search_icon.svg/1200px-Vector_search_icon.svg.png); background-size: 5px 5px; background-repeat: no-repeat; background-position: 10% 10%; outline: none; width: 40%; padding: 8px 25px; border: 1px solid #DDD; border-radius: 25px; margin: 20px; }
Improve this answer
Sign up to request clarification or add additional context in comments.

2 Comments

Thanks a lot for also explaining what each of the properties does and why we add them. Appreciate it! After I chose the appropriate positions, I run into the problem that my text cursor was intersecting with the icon. I increased the padding to 50px, but do you happen to know if there is an easier/simpler way of doing this? I don't want to pad the right side of the input field. Also, would like to vertically align the text and icon. Is there an easy way for achieving this?
Hello @user13717018! I think the best way to sort this out would be to use absolute positioning, but of course that can get annoying. For the second issue, you should use flexbox. If you look it up you will find many tutorials online.
1

added background-size, background-position & background-repeat

input[type=text] { background-image: url(https://upload.wikimedia.org/wikipedia/commons/thumb/7/7e/Vector_search_icon.svg/1200px-Vector_search_icon.svg.png); background-image: url(https://upload.wikimedia.org/wikipedia/commons/thumb/7/7e/Vector_search_icon.svg/1200px-Vector_search_icon.svg.png); background-size: 20px; outline: none; width: 40%; padding: 8px 25px 8px 40px; border: 1px solid #DDD; border-radius: 25px; margin: 20px; background-repeat: no-repeat; background-position: 10px; }
<!DOCTYPE html> <html lang = "en"> <head> <title>Search!</title> <link rel = "stylesheet" href = "style.css"> <link rel = "stylesheet" href = "https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous"> </head> <body> <div> <ul class = "nav justify-content-end"> <li class = "nav-item"> <a class= "nav-link" href = "image.html">Image Search</a> </li> <li class = "nav-item"> <a class = "nav-link" href = "advanced.html">Advanced Search</a> </li> </ul> </div> <container> <div class = "image-box"> <center> <img alt = "Google" height = "92" src = "https://assets.stickpng.com/images/580b57fcd9996e24bc43c51f.png"> </center> </div> <div> <center> <form action = "https://google.com/search"> <input type = "text" name = "q"><br> <input type = "submit" value = "Google Search"> <input type = "submit" value = "I'm Feeling Lucky"> </form> </center> </div> </container> </body> </html>

Improve this answer

Comments

0

I've made some adjustments to your code.

Here are the added properties that you can adjust to your liking:

EDIT: Linked docs for added CSS properties.

background-repeat: no-repeat;

background-size: 12px;

background-position:3% 50%;

Run the snippet below and let me know if this works for you.

input[type=text] { background-image: url(https://upload.wikimedia.org/wikipedia/commons/thumb/7/7e/Vector_search_icon.svg/1200px-Vector_search_icon.svg.png); background-repeat: no-repeat; background-size: 12px; background-position:3% 50%; outline: none; width: 40%; padding: 8px 25px; border: 1px solid #DDD; border-radius: 25px; margin: 20px; }
<div> <ul class = "nav justify-content-end"> <li class = "nav-item"> <a class= "nav-link" href = "image.html">Image Search</a> </li> <li class = "nav-item"> <a class = "nav-link" href = "advanced.html">Advanced Search</a> </li> </ul> </div> <container> <div class = "image-box"> <center> <img alt = "Google" height = "92" src = "https://assets.stickpng.com/images/580b57fcd9996e24bc43c51f.png"> </center> </div> <div> <center> <form action = "https://google.com/search"> <input type = "text" name = "q"><br> <input type = "submit" value = "Google Search"> <input type = "submit" value = "I'm Feeling Lucky"> </form> </center> </div> </container>

Improve this answer

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.