Results 1 to 2 of 2

Thread: Use of the Background-Position Property in CSS

  1. #1
    Join Date
    Mar 2021
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Use of the Background-Position Property in CSS

    Hello All, I am new in this community and I am in my learning face for attending CSS based interviews, I want to know What is the use of the background-position property? As my research, It can be used to define the initial position of a background image but I want to their coding syntax Can anyone know the syntax?

  2. #2
    Join Date
    Nov 2006
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    1,996
    Thanks
    2
    Thanked 267 Times in 262 Posts

    Default

    Hi there ankitdixit,

    and a warm welcome to these forums.

    Here is an example...
    Code:
    
    <!DOCTYPE HTML>
    <html lang="en">
    <head>
    
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,height=device-height,initial-scale=1">
    
    <title>Untitled document</title>
    
    <!--
    The internal CSS should be transferred to an external file
    <link rel="stylesheet" href="screen.css" media="screen">
    -->
    
    <style media="screen">
    body {
        background-color: #f0f0f0;
        font: normal 1em / 1.5em sans-serif;
     } 
    #example-container {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 50vw;
        height: 33.333vw;
        margin: 1em auto;
        border: 1px solid #999;
        font-size: 4vw;
        color: #fff;
        text-shadow: 0 0 2px #000;
        background-color: #fff;
        background-image: url( https://coothead.co.uk/images/blood.jpg );
        background-repeat: no-repeat;
        background-size: 80% auto;
        background-position: center center;
    }
    </style>
    
    </head>
    <body>
    
    <div id="example-container">
    	Lorem Ipsum
    </div>
    
    </body>
    </html>
    
    
    Futher reading:-

    MDN - background-position property

    coothead
    ~ the original bald headed old fart ~

Similar Threads

  1. Resolved Javascript Background-Position
    By Deadweight in forum JavaScript
    Replies: 0
    Last Post: 12-17-2015, 11:23 PM
  2. Help with css background image position
    By johriley in forum CSS
    Replies: 1
    Last Post: 01-14-2011, 01:50 AM
  3. DD's CSS background-repeat property malfunction
    By Den7 in forum Dynamic Drive scripts help
    Replies: 1
    Last Post: 05-30-2010, 10:51 AM
  4. Replies: 1
    Last Post: 03-17-2010, 06:27 PM
  5. Resolved Div over a Div with a background property.
    By cbier in forum CSS
    Replies: 3
    Last Post: 11-23-2008, 09:36 PM

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •