need to add a watermark

rockypointendoscopy.com

In the white area above the slideshow, the client would like a faded picture, or watermark, sort of like what this site has in the outer area: cirugiabariatrica.com.ar

I can find the images ok, but I am not sure how to put an image under that area. Need some help here from the experts. Thanks.
mel200Asked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

GaryCommented:
The element's class is row-fluid so just specify a background image on that class
0
mel200Author Commented:
Thanks!
0
mel200Author Commented:
Ok, I have:
 .row-fluid {
    width: 100%;
    *zoom: 1;
      background-image:url(/images/watermark.jpg);
      
  }

But I still don't see it.
0
Big Business Goals? Which KPIs Will Help You

The most successful MSPs rely on metrics – known as key performance indicators (KPIs) – for making informed decisions that help their businesses thrive, rather than just survive. This eBook provides an overview of the most important KPIs used by top MSPs.

GaryCommented:
I don't see it anywhere in your css - have you uploaded it?
0
mel200Author Commented:
yes, it's under scripts/bootstrap/css/bootstrap-responsive.css, line 198.
0
GaryCommented:
There is background in your css - double check you uploaded it.
0
mel200Author Commented:
The image? It's definitely uploaded, I checked that.
0
GaryCommented:
Yes, but I don't see any change in your css - there is no line in your css setting the background.
0
mel200Author Commented:
.row-fluid {
    width: 100%;
    *zoom: 1;
      background-image:url(/images/watermark.jpg);
     
  }

is on line 198 of scripts/bootstrap/css/bootstrap-responsive.css, I see it when I go there online. Maybe I'm not understanding you?
0
GaryCommented:
The file online is bootstrap-responsive.min.css not bootstrap-responsive.css
0
mel200Author Commented:
If you go here: rockypointendoscopy.com/scripts/bootstrap/css/bootstrap-responsive.css

and search row-fluid, you'll see where I put it.
0
GaryCommented:
That file is not used in your site, your website is using bootstrap-responsive.min.css
0
mel200Author Commented:
Ok, but if I add it to bootstrap-responsive.min.css, it appears! Thanks. However, it still doesn't completely fill the frame...
0
mel200Author Commented:
Also, now it's under the lower section as well, and I only wanted it on the top. Thanks.
0
GaryCommented:
Still not seeing it uploaded.
But...do you want it to completely fill all the white area immediately above the slider?
If so change the background to #divBoxed which is line 143 in custom.css and add no-repeat e.g.

#divBoxed{
      position: relative;
      background:url(/images/watermark.jpg) no-repeat;
}
0
mel200Author Commented:
ok, now we're getting close! But there's still a small space on the right that isn't filled. Thanks very much for your help and your patience with me.
0
GaryCommented:
Don't see any white space on the right.
Are you talking about your slider that has a gap on the right? Remove
margin-left: -5px; from .camera_wrap {} in custom.css line 258
0
mel200Author Commented:
screenshotNo, I mean the white gap I see to the right of the contact button. I see it in Firefox and IE.
0
GaryCommented:
That's not what I see, try doing a hard refresh.
0
mel200Author Commented:
did CTRL F5 several times, and I still see it.
0
GaryCommented:
And you are looking at this online? It kind of looks like the image is getting squashed but in IE10, FF and Chrome it looks perfect
0
mel200Author Commented:
yes, that's what it looks like for me in IE9, Firefox 24.0, and Chrome 30, using a DELL Inspiron N7010, with a resolution of 1600x900.
0
GaryCommented:
Can you post a full screenshot i.e. showing the whole header/slider part - may give me a clue.
0
mel200Author Commented:
Sure thing, here it is.full screen
0
GaryCommented:
Ahhh ok  you have your browser wider than the image.
Either:
Set your site to have a max width equal to the image.
or
Use css background-size to make it fill - will not work in IE8 and lower.
or
Let the image repeat - will probably look horrible.
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
mel200Author Commented:
ok- I can't do #1, as the client wants the images to fit the whole page, and have no outer edges.

Let the image repeat sounds not good. So I will try to use css background size. Thanks.
0
mel200Author Commented:
I've requested that this question be closed as follows:

Accepted answer: 0 points for mel200's comment #a39580683

for the following reason:

That works, thanks! Now I'll play with the image a little. Thanks very much for all your help!
0
GaryCommented:
You've selected to accept your own comment as the answer
0
mel200Author Commented:
Excellent answers, thanks for your help!
0
mel200Author Commented:
(sorry about that)
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
Web Development

From novice to tech pro — start learning today.