How to add a background image or theme through CSS?


Tags: html,css,user-interface

Problem :

Am new to html and learning to design an UI. I wanted to add a background image or theme through the below code. But it's displaying only the color ,not the image.Please let me know how can i achieve it.

<!Document html>
<html lang="en">
<base href="https://abcd.com">
<head>
<title>abcd</title>
</head>
<style>
body{
background-image: url("paper.gif");
background-color: #cccccc;
}
</style>

<body>
<h1 align="center" style="color:brown;position:absolute;top: 3%; left: 41%;">abcd</h1>
</div>
<h2 style="color:skyblue; position:absolute;top: 20%; left: 39%;">Login</h2>
<div style="position:absolute;top: 26%; left: 39%; width:300px;height:120px;border:1px solid #000;"></div>
<form name="login" style="font-size:larger;position:absolute;top: 27%; left: 40%;">
            Username : <input type="text" name="userid"/><br></br>
            Password : <input type="password" name="pswrd"/><br></br>
            <input class="btn btn-primary" style="font-size:medium;background-color: #FFF8DC; position:absolute;top: 95%; left: 50%;" type="button" onclick="check(this.form)" value="Login"/>
            <input style="font-size:medium;background-color: #FFF8DC; position:absolute;top: 95%; left: 75%;" type="reset" value="Cancel"/>
        </form>

</body>
</html>

I have placed the image in C:\Users\myuser\Pictures\HTML



Solution :

You have put image path like: url("paper.gif") then put your image in same folder where your html file has.

You have written correct way. Just set proper path.

background-image: url("paper.gif");

Or you want to set c: drive path the you can.

background-image: url("file://C:/Users/myuser/Pictures/HTML/paper.gif");

But i will not recommend it.

You can put image in images folder and give path like:

background-image: url("images/paper.gif");

    CSS Howto..

    how to solve in conflict css?

    How to toggle class using jquery if else statement?

    How to position these images in CSS?

    How to dynamically change the style of a comma separated tags with html/css/jquery

    How do I center Glyphicons horizontally using Twitter Bootstrap

    How to redirect using css? [duplicate]

    CSS: how can I hide a div when its text doesn't fit?

    How to refer to css file in codeigniter? 2.0

    How to modify CSS rules without adding style attribute?

    Dropdown Menu will move all
    Below. How to prevent it?

    How to represent dual-cell format in CSS?

    How to make entire div clickable with css only

    jQuery Accordion header with jQuery UI icon button (hide/show + hover/click)

    How do I add a shadow to an entire table using just CSS?

    How do i make a flexible div with a background in css

    Is there a limit to how deep an HTML document or CSS tree can be?

    How can I add interactive content to a Bootstrap popover?

    How to prepend a div to another div using javascript

    How to add some non-standard font to a website?

    How to correctly align fixed header fully to top and left in CSS

    CSS: how to share remaining vertical space evenly?

    jQuery - How to improve the logic for toggling inline css and class name while clicking activated buttons and hovering non-activated buttons?

    How to utilize CSS only button markup?

    How can I avoid using too many classes in CSS?

    How to revise the css transitions with a delay

    How do I get one element to respond to the click of another element? - CSS/jQuery

    How to apply pseudo-element styling to specific class only?

    How to get started with Blueprint [CSS Framework]?

    Why do the Google Fonts fail to show up on my website?

    CSS: How to change colour of active navigation page menu