100% height background starting at 50% horizontally

by

Like you already noticed and as I explained here background-position with percentage won’t behave like you may think.

An idea to achieve this is to consider adjusting background-origin like below:

.box {
  padding-left:50%;
  height:300px;
  border:1px solid;
  background:url(https://picsum.photos/200/200?image=1069) left/100% auto no-repeat;
  background-origin:content-box;
}
<div class="box">

</div>

the trick is to have the padding covering half the width and we start placing the background inside the content-box

More Related Contents:

  1. How to make two divs top and bottom
  2. Can I add a hyperlink using pure CSS?
  3. How can i achieve this style in Html/Css?
  4. Responsively change div size keeping aspect ratio [duplicate]
  5. SVG drop shadow using css3
  6. Switching the order of block elements with CSS [duplicate]
  7. Imitating a blink tag with CSS3 animations
  8. How can I force a long string without any blank to be wrapped?
  9. 100% Min Height CSS layout
  10. Rendering problems using flexbox in Firefox and Chrome 48 [duplicate]
  11. Equal space between flex items
  12. How to get a child element to show behind (lower z-index) than its parent?
  13. What is the performance impact of the universal selector?
  14. How to wrap text of HTML button with fixed width?
  15. Place boxes inside ul in center, but align them left
  16. Image width/height as an attribute or in CSS? [duplicate]
  17. Aligning decimal points in HTML
  18. Why is nth-child selector not working?
  19. What’s default HTML/CSS link color?
  20. CSS: stretching background image to 100% width and height of screen?
  21. Can overflow:hidden affect layout?
  22. How to get tiles centered and left-justified at the same time
  23. How to Animate Gradients using CSS
  24. Bootstrap navbar: nothing is displayed on smaller devices
  25. Why does inline-block cause this div to have height?
  26. How do I remove background-image in css?
  27. Google Web Fonts and PDF generation from HTML with wkhtmltopdf
  28. How can I increase a scrollbar’s width using CSS?
  29. Will targeting IE8 with conditional comments work?
  30. Height is not correct in flexbox items in Chrome [duplicate]

Leave a Comment