How would you write the code for a jpg that you want to use for a background for the home page?
Hi,
In it’s simplest form it would be…
body {
background-image: url("../images/bg-image.jpeg"); /*file path could vary*/
}
If you are wanting page specific background images then see this recent thread
Replace background header color with image on selected page?
2 Likes
Make background image in webpage is very simple coding please check the followin code with internall css:
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-image: url("img_tree.gif"), url("paper.gif");
background-color: #000000;
}
</style>
</head>
<body>
</body>
</html>
Perhaps the OP is refering to a bg image that displays on the home page only.
If this is the case , CSS cannot tell what is a home page (actually a home page could be an arbitrary page anyway).
HOWEVER,
if you have a way to mark the BODY tag with a class (.eg <body class="homepage"> ) Then you can easily write rules which include .homepage in the selector.
If your page is static, or you have coded a specific template for the home page you can add the class tight there. Also, Wordpress has an is_home() function you can utilize to add the class as needed.
I almost forgot. You could load the general rules. and inline a “<style>” tag in the page head, inline CSS by default overrides imported CSS.
hope that helps
Thanks for your help, and please pardon my response time. This is a less pressing project for me, so I don’t get to it much.
Okay, when the image I want to use on a particular page is in the same folder with the file I am writing code in. WHY is the reference to URL necessary? It would seem that the URL would be necessary to pull in an image from an online source, but that is not the case here. Its confusing to me NOT just to name the image file itself, and the browser puts it on the page. This would not be a background image for an element, but rather for the body itself. Is that doable? How?
Mananthmy, in your reply It is interesting that you have placed the reference to the image to be used in the style sheet, rather than in the body. Seems usually the image mention itself would go in the body, and the styling of the image would be in the style sheet, but I am an infant in learning CSS.
Not really so much CSS as it is semantics. If an image is part of the page content, then yes, it should be in an <img> tag (with alt text). If it is purely decorational, eg. a background image, then it should be in the CSS.
There can sometimes be a grey area as to whether an image is important content or decoration only, but if you think about it in terms of “if the background image didn’t display, would it make a crucial difference?” you should be able to make the distinction.
It is possible to have a background image in an <img> tag. But the page would need position / z-index, or some other mess of CSS to have it display as a background image. IMHO, not worth the effort and risk of display problems when having it as CSS is easy to do and more appropriate.
3 Likes
Because that is the syntax of the background-image property.
see: https://tympanus.net/codrops/css_reference/background-image/
https://developer.mozilla.org/en-US/docs/Web/CSS/background-image
https://www.w3.org/wiki/CSS/Properties/background-image
https://www.sitepoint.com/background-image-css-property/
for more, Google: background-image
A URL (Uniform Resource Locator) is not necessarily an internet address. It can also be a local path to the target object.
When one adds an image as an element on the page, it is a foreground image and is written as <img src="the local path to the image" alt="" width="" height="">. Such an image usually occupies space in the content of the page (but not always).
The <body> is an element. An image is assigned to the body as a background-image and is coded in this general format
background-image:url("local-path/to/faint-diagram.jpg");.
You may be confusing the term <body> for the term content which is the message in the foreground of the page and may contain images or it may be a logo in the <header>. Foreground images are coded in this format
<img src="local-path/to/diagram.jpg" alt="abc" width="nn" height="nn">
The above example shows a local path to the resource. It could also be an internet address.
<img src="https://via.placeholder.com/260x260" alt="image">
5 Likes
I cannot overemphasize the value of taking a beginner’s course in HTML and CSS. With the guided course you will learn the language of HTML and CSS as well as the fundamental behaviours of many of the elements used in the construction of web pages. You will also develop a list of URLs to resources that you will use frequently to validate your pages, verify the options to CSS properties, and much much more.
If you want a recommendation for an on-line course, just ask and someone will recommend several.
Please trust that it will be time well spent.
2 Likes
The ONE thing that CANNOT be assumed is that I have no previous training in this . Last year, I invested half the year viewing 84 CSS lessons which followed after 24 HTML lessons. Point is, I went on to JavaScript and JQuery, neither of which I quite got my head around. Seeing not much market for just CSS and HTML, I laid them aside for a time. Later, when I needed to build a website for my writing, I found out from WordPress that they would take my HTML/CSS code scribbling and post that, adding the other themselves as needed. SO I went back reviewed my code and created a website for my writing, so prospective editors could look at with just a click.
So, you see, what I am asking about in here are bits of info here and there. I already had most of the site built, just needed pointers and helps.
To be fair, knowing the difference between a background image and a content image does seem like it would be basic level knowledge. But I can certainly understand how “basic” things can be missed. When I started there was so much information that it was too much to absorb and much didn’t “stick” until I got my hands dirty putting the pieces together to write my own. For me, lessons are great, but the real learning comes with practice, practice, practice. (with a lot of falling down and getting back up again).
Same for me, I keep getting better (or so I like to think) but the goalposts keep moving!
I’m not sure about that, AFAIK there are a lot of designers that couldn’t write a line of serverside or JavaScript code and do well for themselves writing exceptional HTML and CSS. If told they “need a text input here named u_city” they can do it, but they don’t necessarily know anything about the how or why.
6 Likes
NOW we’re talklng! Would LOVE to know who out there can use someone who has a decent knowledge of HTML/CSS, and has, in fact, designed his own site? Through answers gained in here, I got it ready to load into a server and be put online. How do you find THOSE customers? I know I can design and create a website, and get it online.
There seem to be a lot of people that specialize in writing themes for WordPress and other CMS’ but because the market is fairly saturated I don’t know how profitable it is. Maybe not enough to buy a private island but it must be enough to help pay the bills else I don’t see why so many would do it.
Even if you don’t write themes I think it would be a good idea to put together a portfolio to highlight your range of skills. Perhaps as single pages or maybe as mini faux sites in subfolders? Best would be actual sites you have designed that you can use as reference of course, but you need to start somewhere. Maybe some pro bono work for charities?
One thing I don’t have a clue about is how to “protect” a great design from being copied. AFAIK, the only recourse is to file a DMCA takedown and be prepared to hire a lawyer and go to court. The “hiring a lawyer” seems to be cost prohibitive to most except for the big guns.
[quote=“Mittineague, post:14, topic:300233”]
"
[/quote]One thing I don’t have a clue about is how to “protect” a great design from being copied.
That’s done with copyright. Put the sign, year and your name and you have some protection, register it with the US Copyright Office, and you have legal protection against unauthorized use. This and patent protection are protection of a specific idea, expression or product, not a concept.
This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.