Image URL in CSS?

Image URL in CSS?
0

#1

I’m currently doing the Portfolio project.

I find it difficult to find stuff with too much code, so I was thinking of a way to tiding up.

I want to leave the basic spots for the images on HTML, with ids such as “img1”, “img2” etc, and define where the images come from in the CSS. Those images will also be links to external websites.

I googled trying to find a way to do that in CSS, but I couldn’t find, only background images, and that’s not what I’m looking for. I fear there’s no way to do what I want? The links are huge…

Does anybody know how to do that?


#2

Never tried it, but I suppose it’s possible to create divs to whatever size you want them to be and use the background property? If that’s not what you want, you’re right. It’s probably not possible.

Edit: It’s not possible to create links in CSS. Those have to be part of your html.


#3

Also can’t imagine why someone would want to…


#4

Thank you for your answer.

The reason why is because it would be easier to organize.


#5

Did you consider/try making different divs with different backgrounds? You’d still have to do your links in html, but you could do pictures in css theoretically.


#6

After you said it couldn’t be done, I decided to do the usual way, all in HTML… because the images have to be links, there would be nowhere to click if I used them as backgrounds I believe.


#7

You could turn the div into a hyperlink like this:

<a href = "lin.k">
  <div> Size this div in CSS to whatever size you want your image to be </div>
</a>

Then set your background image in CSS. The end result would be that you have to edit 2 documents (CSS and HTML) if you need to change the image and the link, but if you need to manage images in CSS, it would work.


#8

@TCherubi

If Chris can’t do it, I don’t try. Here is what I found to the extent of using URL (links) and background images only.
It would appear that Javascript has a lot more URL capability than CSS where you can assign variables / functions . . . , being a cooperative component of your HTML.

https://css-tricks.com/almanac/properties/b/background-image/

Use code comments so you can find the parts of code that you want in a text search (you can make “pseudo blocks” this way).

<!-- Green Bay Packers Team Section -->

<!-- Pittsburgh Steelers Team Section -->

Good Luck!

-WWC


#9

@3gimpfingers @Wookies-Will-Code

Thank you guys :slight_smile: I will try both suggestions.

Who is Chris?


#10

From what I’m aware of, getting an image in CSS without using HTML img tags requires adding a background property to your image id.

You can do this:

<html>
<body>
<style>
 #myimg {
background-image: url('myimage.jpg');
}
</style>
<div id="myimg"></div>
</body>
</html>
 

However doing it this way would require more content in your div id to show the full image. Generally, you would keep your images and links together within the HTML. There is no other way of doing it, the background property is the only way to show images via CSS, unless there are other ways by using Javascript.

If there is a way, i’ll update you on such methods.


#11

This is Chris . . . @TCherubi

https://css-tricks.com/author/chriscoyier/

-WWC