CODEWITHSUNDEEP
htmlcss
MrMajestic
MrMajestic

Reputation: 3

Box inside background image HTML, CSS

I am currently working on a project in college. I have a problem, I have an image that I want to place a box over. It also should have padding on all the sides based on the outline of the image. I have tried all sorts but failed. Could anyone give an example of HTML and CSS to help me with this problem.

This is what it should look like (the grass is the background image)

Upvotes: 0

Views: 2203

Answers (2)

Nick Rimmer
Nick Rimmer

Reputation: 11

Use image as "background: url(...)" of first div, in first div insert second div with paddings "padding: 25px" (for example). Or maybe i wrong understand you)

Upvotes: 0

Jack Guy
Jack Guy

Reputation: 8523

Assign the image to a div as a background image, and center the inner div within that using padding.

.inner {
    background-color: blue;
    width: 100%;
    height: 100%
}

.background {
    background-image: url('http://placehold.it/800x600');
    width: 100%;
    background-size: cover;
    height: 300px;
    padding: 50px;
    box-sizing: border-box;
}

http://jsfiddle.net/f4yfju8d/

Upvotes: 2

Related Questions