Background-position in css

We want to change the position of the image, so that it does not disturb the text too much.
The position of the image is specified by the background-position property:



<!DOCTYPE html>
<html>
<head>
<style>
body {
  background-image: url("img_tree.png");
  background-repeat: no-repeat;
  background-position: right top;
  margin-right: 200px;
}
</style>
</head>
<body>

<h1>Hello World!</h1>
<p>Technisia</p>
<p>Technology</p>
<p>In this example we have also added a margin on the right side, so the background image will never disturb the text.</p>

</body>
</html>

Comments

Post a Comment

Popular posts from this blog

Background repeat and no-repeat in css

Background repeat in css: <!DOCTYPE html> <html> <head> <style> body {   background-image: url("gradient_bg.png");   background-repeat: repeat-x; // we can give repeat-y for aligning in y axis } </style> </head> <body> <h1>Hello World!</h1> <p>Here, a background image is repeated only horizontally!</p> </body> </html> No Repeat in css: <!DOCTYPE html> <html> <head> <style> body {   background-image: url("img_tree.png");   background-repeat: no-repeat; } </style> </head> <body> <h1>Hello World!</h1> <p>W3Schools background image example.</p> <p>The background image is only showing once, but it is disturbing the reader!</p> </body> </html>
Read more

Introduction to CSS

What is CSS? CSS  stands for  C ascading  S tyle  S heets CSS describes  how HTML elements are to be displayed on screen, paper, or in other media CSS  saves a lot of work . It can control the layout of multiple web pages all at once External stylesheets are stored in  CSS files. Why Use CSS? CSS is used to define styles for your web pages, including the design, layout and variations in display for different devices and screen sizes.  CSS Solved a Big Problem HTML was NEVER intended to contain tags for formatting a web page! HTML was created to  describe the content  of a web page, like: <h1>This is a heading</h1> <p>This is a paragraph.</p> When tags like <font>, and color attributes were added to the HTML 3.2 specification, it started a nightmare for web developers. Development of large websites, where fonts and color information were added to every single page, became a ...
Read more

margins in css

CSS Margins The CSS  margin  properties are used to create space around elements, outside of any defined borders. With CSS, you have full control over the margins. There are properties for setting the margin for each side of an element (top, right, bottom, and left). margin-top margin-right margin-bottom margin-left All the margin properties can have the following values: auto - the browser calculates the margin length  - specifies a margin in px, pt, cm, etc. %  - specifies a margin in % of the width of the containing element inherit - specifies that the margin should be inherited from the parent element Tip:  Negative values are allowed. <!DOCTYPE html> <html> <head> <style> div {   border: 1px solid black;   margin-top: 100px;   margin-bottom: 100px;   margin-right: 150px;   margin-left: 80px;   background-color: lightblue; } </style> </head...
Read more