How to give a border as a background in css without using image and without adding anything to mark-up?


Tags: html,css,html5,css3

Problem :

For example here http://jsfiddle.net/jitendravyas/5Wqn4/1/

I want to take <h1> over red area. How to make is possible without using image and another added more element.

using border is not necessary I just want background like this.

enter image description here



Solution :

Without using any extra markup, there's a couple of things you could do.

Apply a negative top margin on the h1:

h1{margin-top:-150px;}

http://jsfiddle.net/5Wqn4/2/

Position the h1 absolutely:

h1{
 position:absolute;
 top:50px;
 left: 50px;   
}

http://jsfiddle.net/5Wqn4/3/

Without your body border:

Without using the border you've added to the body you can simply style the h1 as you require:

body {background:yellow;margin:0;padding:0;}

h1{
    background-color:red;
    margin:0;
    height:150px;

}

http://jsfiddle.net/5Wqn4/5/

UPDATE

Further to your comments below, here's a sample that probably matches more what you need:

http://jsfiddle.net/SbGDQ/


    CSS Howto..

    How to assign custom CSS class to arbitrary arbitrary rows of h:dataTable?

    How to scale a fixed-width website to an iPad viewport

    How to revert back to Desktop website from Mobile Website when using CSS Media Queries?

    How to wrap a div containing text around a div containing an image?

    How to flow text from a box to another with CSS

    How to make a round mask over a image

    How do I properly inspect jquery and javascript using web developer tools?

    How to style another object in when a user hover object in css

    How to override css for img tag

    How to change the css of a div using the click function on jQuery, but however twice instead of once?

    How to overlap elements inside of a ng-repeat list - position: absolute?

    How can I delete this “a” space under the images using CSS?

    How to create such layout in CSS?

    How to make CSS border on an image? [closed]

    How can I center vertically a div with position absolute and hight = 100px on another div with position relative but with not standard height

    How do I show specific images from a get_children array in WordPress

    How do I fill up the remainder of a div with another div?

    How to Position an Element Absolute from Center - CSS

    How to apply padding to a column using and CSS in Firefox?

    How to serve SVG using C# so that it will render as a CSS background image

    How to refer to a CSS style using ASP.NET MVC?

    How do I align the list items in an
      with my

      ?

    I want to bring css for select option. how to write for this image, sample output like this

    How to show sorting order if column width is smaller than caption in free jqgrid

    CSS: how to create responsive irregular shapes

    Dompdf: how to get background image to show on first page only

    How to crop an image edge

    How I can add td to css style for inputs and its label?

    creating a slide show for home page in my web site [closed]

    How to make a barlike chart but only with html and css [closed]