Trying to Add Custom Border to The Website

HTML & CSS
1

Hey guys,

I’m trying to add a custom border image to my <div> and it doesn’t work. I already created the border image as the same width and height of the <div> box. Should be easier but it didn’t work. Please help! Thanks!!

3 
<section class="pre-register">
<article>
  <div class="box">
  <h1>Pre-Register Now!</h1>
  <p>An exciting new card battle game from the makers of Shop Heroes! <br>Pre-register now to get entered into a drawing for early access to <br>the game and an exclusive welcome pack<br> with a guaranteed Legendary card (<strong>$50</strong> value)!</p>
<div class="email">
   <h3>Email:
   <input id="emailAddress" type="email">
   <input id="button" type="submit" value="submit">
 </h3>
</div>
</div>
</div>
</section>
4 
.box {
  margin:10px 50px 10px 150px;
  height:220px;
  width:1150px;
  top:180px;
  opacity:0.7;
  background-color: white;
  background-image:url(./CH_container2 2.png); no-repeat;
5

Does your image file really have a space in the name?

6

yeah it does…

7

If you can’t rename the file, try referencing it as ./CH_container2%202.png (I think I have that right - someone will correct me if not!)

8

but I removed it in the name and tried again, it worked!!! Thanks for the hint!

However, the image is slightly smaller than the box, how can I make it fit? Thanks a lot!

9

I think you’ll need to show us a picture of what you are trying to do or at least attach the image you are using to the post.

You would rarely use a background image to make a border but we’d need to see what you are trying to do. You can make a border-image but it is a little tricky.

Also the code you posted looks very suspect width the fixed widths, fixed heights and strange offsets.

These days you need to be designing more fluidly and avoid fixed widths and fixed heights but let the content dictate the flow. That means max-width instead of fixed width and no height at all (or min-height) and definitely no magic numbers like margin-left:150px when the page is 1150px wide.

10

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.