Html - Website - How to style text on images to look GOOD?

[kitesurfing17]

I am creating a website for a friend.
I am trying to style 2 main titles on background image(red arrows on photo), but they dont look modern or creative or nice right now they just look. I want people to feel that this page looks very nice and have a positive reaction about it.

What I thought that maybe would be good to do :

• Blurr image on the sides or something,
• Design a graphic art - but what colors and style would play well with this photo?
• Give a div a black semi transparent background - Tried it, she said it looks bad…
• Darkening image - she said she didn’t want to because it sends the wrong message… ( maybe sides only ? )

I would really appreciate if some creative soul could tell me what can I do to make those titles look amazing and really nice. Preferably wanted to have those titles in right-up corner and left-down corner.
Should I upload all the files somewhere?

All kinds of help and tips will be very much appreciated.

html :

<section id="home-slider">
            <div id="slider" class="sl-slider-wrapper">
				<div class="sl-slider">
					<div class="sl-slide"  data-orientation="horizontal" data-slice1-rotation="-25" data-slice2-rotation="-25" data-slice1-scale="2" data-slice2-scale="2">
						<div class="bg-img bg-img-1"  style="background-size: cover;"></div>
						<div class="slide-caption">
                            <div class="caption-content">
								<div class="row">
									<div class="col-md-5"  style="text-align: center; float:right; margin-right: 0%;padding-top: 3%;">
                                		<div class="offer10">Sport Psychologist</div>
										<div class="offer10">Caroline Bucharestas</div>
								</div>

								<div class="divoffer">
									<div class="offer1" style="display: inline-block;">
										Would you like to set up a meeting?
										<hr class=".sec-title" style="border-bottom: 3px">
										<div class="offer2">
											Have any questions?
										</div>
										<div>
											<a href="#contact" class="btn btn-blue btn-effect" style="margin: 20px">Contact me !</a>
										</div>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</section>

Css :

.offer10 {
    font-family: Rockwell, "Courier Bold", Courier, Georgia, Times, "Times New Roman", serif;
    font-size: 39px;
    font-weight: 600;
    line-height: 1.05em;
    color: rgb(197, 225, 235)
}
.offer1{
    font-family: "Poppins", sans-serif;
    font-size: 20px;
    font-weight: 900;
    line-height: 1.05em;
	text-align: left;
    padding-right: 60%;
    color:white;
}

.offer2{
    font-family: "Poppins", sans-serif;
    font-size: 17px;
    font-weight: 900;
    line-height: 1.05em;
    text-align: left;
    color: white;
}
.divoffer{
    position: absolute;
	top: 70%;
	width: 84%;
	padding: 5px;
    margin-bottom: min(10px, 5%);
}

[SamA74]

The big problem I’m seeing with it is contrast for the text. The white text is getting lost in the bright reflection in the lake.
I see you have looked at some options to remedy that.
I don’t think that blurring the image would help, as that does not alter the luminance.
The semi transparent background would help contrast, but has been rejected. Perhaps a gradient or vignette version would be a more subtle way to do that.
Other options are adding a text shadow, or altering the text colour to something that contrasts more with the background image.
Also bear in mind, that as the page size changes, the part of the image under the text may change, so you will have to contrast with almost any part of the image, which has quite a range of luminance.
I would agree that darkening the whole picture would spoil the photo.
But these are just a few option to consider and try out for looks.

[PaulOB]

You may find some ideas in these article.

Methods for Contrasting Text Against Backgrounds | CSS-Tricks

Blurred Borders in CSS | CSS-Tricks

https://vincoding.com/css-transparent-gradient-overlay-image/

[formcodes]

I would suggest enlarging offer10 and using a simple text shadow, something like below:

.offer10 {
    font-family: Rockwell, "Courier Bold", Courier, Georgia, Times, "Times New Roman", serif;
    font-size: 55px;
    font-weight: 600;
    line-height: 1.05em;
    color: #fff;
    text-shadow: 1px 1px #222;
}

For the bottom left area, perhaps using a background for the entire container would really help the content stand out with good contrast.

[athomasg]

Putting text on images has always been very difficult unless the background image is uniformly dark or bright. Here are some ideas with examples I’ve found from Dribbble:
• Try putting the text next to the image rather than the image taking about the full width of the screen: https://dribbble.com/shots/14612833-Global-Culture-Scientific-Study
• You can do a partial overlap of the text on the image, but be careful of when the dimensions of the UI changes: https://dribbble.com/shots/14116535-Aesthetica-Website-Design
• You can try the text being above: https://dribbble.com/shots/14081366-Layout
• I know you said you didn’t want darkening, but I figured it wouldn’t hurt to provide an example anyway: https://dribbble.com/shots/14773037-Pickup-Website

As for what colors for a graphic, it’s safest to grab common colors from the image, such as blue, black, green, or gray. If you’re trying to create a contrast from the image, then some colors that pop would be orange or yellow.