Offset a Background Image from the Right Using Css

Offset a background image from the right using CSS

I found this CSS3 feature helpful:

/* to position the element 10px from the right */
background-position: right 10px top;

As far as I know this is not supported in IE8. In latest Chrome/Firefox it works fine.

See Can I use for details on the supported browsers.

Used source: http://tanalin.com/en/blog/2011/09/css3-background-position/

Update:

This feature is now supported in all major browsers, including mobile browsers.

How to move a background image to the right side (when there is already another background image)?

Add position:relative to the heading and right:0 to the :after psuedo-element. Since the :after is position:absolute it will dock to the position relative parent.

There's other ways you could do this with one element, by using multiple background images for example. But this should do the trick.

/* Using example images, since I don't know how to add patterns into jsfiddle without having to download them */

.h1_content {
  background: url(https://upload.wikimedia.org/wikipedia/commons/5/55/Magnifying_glass_icon.svg) no-repeat;  /* pattern for the header, left magnifying glass */ 
  background-size: 4%;
  background-color: #00a8f3;
  color: white;
  position: relative;
}

.h1_content::after {
  content: "";
  background: url(https://upload.wikimedia.org/wikipedia/commons/5/55/Magnifying_glass_icon.svg);
  background-position: right;  /* Doesn't go right? */
  background-repeat: no-repeat;
  position: absolute;
  right: 0;
  background-size: cover;
  width: 50px;
  height: 50px;
}

<article class="text_bottom">
        <section class="section_test">
          <h1 class="h1_content">Topic here</h1>
          <p>Random text here</p>
        </section>
        </article>

Setting background image to div in css leaving an offset in left and right

You could use background-clip: content-box; in combination with a 5px padding left and right.

This would give you the following code:

.submenuButton{
    padding: 0 5px;
    background-image:url(images/but-up-center.png);
    background-repeat:repeat-x;
    background-size: cover;
    background-clip: content-box;
}

More information on background-clip can be found on developer.mozilla.org

Example on jsFiddle

Offset background image and position it centrally

I'll try to give you a much more clear example of what's happening.

We gonna have an div and we gonna mimic the background with an img tag inside that div.

That div is basically an element with overflow:hidden for the background, what i mean is that normally when you set overflow:hidden on an element, if it's content is larger than it, it just hide what's outside.

the background however is not but it has that overflow property to be hidden for it, so if the background is larger it just gets cut of, until you resize it with background-size:100% 100%; to make it fit on both axis.

Example

div {  width: 100px;  height: 100px;  /* to mimic the img being cut of, if it's larger*/  overflow: hidden;  border: 1px solid;  /* to have a visual understanding*/}
.test {  background: url('https://thumb.ibb.co/f1inv8/Adobe_Stock_96159207_Preview.jpg');}

<div class="element">  <img src="https://thumb.ibb.co/f1inv8/Adobe_Stock_96159207_Preview.jpg" class="background"></div>
<div class="test"></div>

offset background image from top

Use background-position to position the image

In your case you want to position it vertically so you need to use background-position-y

#contact {  text-align: center;  padding-bottom: 10px;  background-image: url('https://www.w3schools.com/css/img_fjords.jpg');  background-position-y: 50px;  background-repeat: no-repeat;  background-size: 100%;}

<section id="contact">  <div class="container">    <div class="row">      <h3 class="section-header wow fadeInUp" style="display: inline-block;">Contact Us</h3>    </div>    <div class="row" style="padding-top: 20px;">      <!-- <div id="google-map" style="height:300px;" data-latitude="10.943816" data-longitude="76.934372"></div> -->      <div id="map" style="height:300px;"></div>      <script>      </script>    </div>  </div></section>

How to position background image in bottom right corner? (CSS)

Voilà:

body {
   background-color: #000; /*Default bg, similar to the background's base color*/
   background-image: url("bg.png");
   background-position: right bottom; /*Positioning*/
   background-repeat: no-repeat; /*Prevent showing multiple background images*/
}

The background properties can be combined together, in one background property.
See also: https://developer.mozilla.org/en/CSS/background-position

Offset a Background Image from the Right Using Css