Numberz

Background position, margin-top?

Huh? You mean you need the background to stretch 50px before any content? That would be padding-top . Otherwise, your question makes absolutely no sense.

I meant, I wanted the background image placed 50px downward from where default ‘right top’ css places it.

4 Answers 4

If you mean you want the background image itself to be offset by 50 pixels from the top, like a background margin, then just switch out the top for 50px and you’re set.

Well. It has only two options left and right. That is linked to X and Y axis. So if you want to change the value from the top, you need to change right to left.

 background-image: url(/images/poster.png); background-position: center; background-position-y: 50px; background-repeat: no-repeat; 

While this code may answer the question, providing additional context regarding how and/or why it solves the problem would improve the answer’s long-term value.

working in Navbar adding an image in GrapesJs.Display Image in Split

In Sidebar image fix to display center and clear

Unless you use calc— then you can use a percentage and an offset: background-position: calc(50% + 10px) 50%

Linked

Related

Hot Network Questions

Subscribe to RSS

To subscribe to this RSS feed, copy and paste this URL into your RSS reader.

Site design / logo © 2023 Stack Exchange Inc; user contributions licensed under CC BY-SA . rev 2023.7.24.43543

By clicking “Accept all cookies”, you agree Stack Exchange can store cookies on your device and disclose information in accordance with our Cookie Policy.

Источник

HTML/CSS Margin-top for text moving entire background?

I’m trying to move certain text down from the top of it’s container, but it’s moving the entire container down.

@import url("https://fonts.googleapis.com/css?family=Open+Sans:400,300"); * < margin: 0; padding: 0; box-sizing: border-box; >body < font-family: 'Open Sans'; background-color: lightgray; >a < text-decoration: none; color: #fff; >div#header < background-image: url("header_img.png"); background-size: cover; background-repeat: no-repeat; width: 80%; height: 220px; margin: 0 auto; margin-top: 50; color: #fff; font-size: 22px; >div#header span < font-weight: 300; >div#header h3 < text-align: center; padding-top: 85px; >div#header h4 < text-align: center; >/* #222222 - top nav #F5F5F5 - sidebar background color #FFF - sidebar link hover background color #63B7E8 - sidebar nav link hover text color #D8D8D8 - sidebar nav text color 50px top margin 50px bottom margin */ /* Navigation */ /* Nav Title */ .nav < background-color: dimgray; width: 80%; height: 40px; margin: 0 auto; >/* Remove bullet points on list */ .nav ul < list-style-type: none; margin: 0; padding: 0; overflow: hidden; background-color: dimgray; >.nav ul li < float: left; >.nav ul li a < display: block; color: #fff; text-align: center; padding: 14px; 16px; text-decoration: none; >.nav ul li a:hover < color: #099; background-color: #fff; >.home-content < width: 80%; height: 350px; margin: 0 auto; margin-top: 30px; text-align: center; font-size: 22px; background-color: #fff; >.home-content span < font-weight: 300; >/* This is the Text I want to push down from the top of it's container.*/ .title < margin-top: 15px; >/* I also tried this: .home-content h3 < margin-top: 15px; >*/

Any tips to push just the text down? I’d appreciate it. Thanks. I have also tried padding, but it gives me the same result.

Источник

How can I add margin-top of the background of a div?

I have this page, in which I am displaying a video inside a box, and want my background image to have some «margin-top» so it’s not displayed touching the edge of the box. I tried to add background-position: 10% , but it is not working. Right now it looks like this: And this is my code:

.eu < height: auto; width: 100%; background: url(images/BODY-VERDE.png); position: absolute; top: 0; >.bg-image < position: relative; >.bg-image img < display: block; width: 100%; /* max-width: 1200px; */ /* corresponds to max height of 450px */ margin: 0 auto; >.container-video < width: 100%; height: auto; background: url(images/BODY-VERDE.png); margin: 0 auto; overflow: auto; >

 
 
 
Set us perspiciatis
 
unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore
 
 
 
 
 

I also tried adding .bg-image img , but then everything went down and I just want the background picture.

Источник

CSS Background Repeat Image Margin Top

So I already know a lot of people have asked this. Such as here: css start repeating background from defined position Background position, margin-top? CSS Background repeat issue css start repeating background from defined position Background Margin-top effect with CSS I have literally tried ALL of these methods, properly, and it’s not working. I am trying to have a repeatable background start 100px from the top or ‘normal’ position.

  
  
Proin iaculis pharetra tempus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Vestibulum tincidunt justo nec orci tempus, quis sagittis lacus eleifend. Praesent id justo eget magna lacinia feugiat. In a risus commodo, consectetur diam id, pellentesque quam. Vivamus accumsan vehicula ligula, in tristique lorem scelerisque sed. Aliquam ante urna, bibendum adipiscing tincidunt eu, posuere non turpis. Vivamus vitae porta urna. Suspendisse consequat nisi semper lectus ullamcorper, et tempus augue convallis. Duis ante lacus, bibendum eget diam at, dignissim blandit dui. Nunc placerat purus vel arcu feugiat, viverra semper velit tristique. Proin magna lectus, bibendum ac lectus at, semper sagittis nunc. Duis ornare quam ac convallis sagittis. Nam convallis quis urna eu vestibulum. Aenean vitae pellentesque quam, non ultricies tortor.
 
 

Источник

Adding a background image just below the navigation bar

I want to add a background image (having a full window sized width) just below the navigation bar. It should not cover the whole page length, but starts just below the navigation bar menu, and goes down till a particular specified height. (but the width is full). I referred to the following but still no results: Starting a background image below navbar in Twitter Bootstrap. I am also not using any Bootstrap. This is what I have coded so far but no results: HTML:

 //this is the division created for the background image

ul#menu li < display: inline-block; float: right; position: relative; margin-top: 28px; margin-left: 10px; margin-right: 35px; >ul#menu li a < text-decoration: none; color: #808080; font-family: "Helvetica Neue"; font-size: 15px; >#backgroundimage

Right now It looks like this: I want something like this: Any help would be greatly appreciated.

Источник