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 make the search form without the search button?

    How to get UiBinder Styles to Act The Same as From a .css File?

    how to ajust the background pic according to outer div in css

    C# How to base64 encode background gradient

    Yahoo.widget.Editor - How to configure font size of text

    How to create circle, square or triangle with JavaScript in HTML?

    How to make image fit in div using Jquery

    How can I make a background image of a site start off fitting to screen and then zoomable?

    How to double an image size in HTML using only CSS?

    How to use modernizr for border-image

    how to bench a css pseudo-elements

    How to align multiple columns in bootstrap 3 carousel?

    How can I list available Css Classes from my App_Themes folder?

    How to add fade in and fade out effect in CSS animations no javascript?

    How to remove CSS spaghetti in legacy web app?

    How do I change the css of a different element on hover?

    how to add line break in HTML using jQuery

    how to display nav elements below each other inside of a header element

    How to make image stretch to a specific paragraph?

    How to give padding bottom for overflow hidden div?

    How to apply struts2 tags on existing jsp file without affecting its css and js

    How do I use CSS to to vertically center align an image in a div?

    When using padding-top to retain aspect ratio for fluid layout, how do I vertically center text to background image?

    How to add CSS Hack specifically for IE10?

    How do I align an item to the right inside a flex container?

    How do I create a CSS class Union?

    How to put css class in to html:select element in jsp

    How can I select this element?

    How to handle multiple-language site without database or backend code?

    how to select :after element using jquery