CODEWITHSUNDEEP
htmlcsssliderborderslideshow
aborted
aborted

Reputation: 4531

Having hard time setting a border image

I'm trying to set quite a complex border image to my website. I can't make it a background-image because it's actually a border for a slide and the slide content has to go UNDER the border when it actually slides, and with background image I assume the content will just go above it.

So, basically I need help how to make this a border image for a div maybe. OR if there is a better approach then making this a border, let me know please.

Thank you.

Upvotes: 0

Views: 84

Answers (3)

Ricain
Ricain

Reputation: 706

<style>
    .screen {
        height: 422px;  
        width: 820px;       
    }
    .back {
        position: absolute;
        height: 422px;      
        width: 820px;       
        background-image:url('test.png');
    }
    .content {
        position: absolute;
        height: 320px;
        width: 672px;
        margin-left: 73px;
        margin-top: 56px;
        border-radius: 50px;
        overflow:hidden;
    }
</style>
<div class="screen" >
    <div class="content" >
        put here what ever you want to put inside
    </div>
    <div class="back" ></div>
</div>

this work with me with your image

Upvotes: 0

cimmanon
cimmanon

Reputation: 68329

You could use the before/after psuedo elements to attach your unusual "border" as a background image.

div.slide {
    background: yellow;
    position: relative;
}

div.slide:before {
    display:  block;
    content: " ";
    position: absolute;
    width: 100%;
    height: 100%;
    background: url(slide-bg.png) no-repeat;
    background-size: 100% 100%;
    z-index: 1;
}

http://jsfiddle.net/kTgJJ/

The demo uses an opaque to transparent gradient so you can see the effect. Your image just needs to have transparent areas for the text to show through, and opaque areas where it shouldn't. Add paddings to the .slide as appropriate.

Upvotes: 0

Ricain
Ricain

Reputation: 706

Doing a transparet png image is not html, you need to do it with a software such Photoshop or Gimp else you can do it with messing around with divs

Upvotes: 1

Related Questions