is putting image background to footer a bad idea*
is putting image background to footer a bad idea*
81 Replies
Unknown User•3y ago
Message Not Public
Sign In & Join Server To View
Not bad idea here's a example i used for footer as long as everything is clear to read it's good to go
which one looks better any feedback? Do you think these looks OK ? @xukita @iqmuneer
could make the img darker since the img is white and the text is white
like this
img is darker in my images
the contrast of of your img doesn't make the green text show nicely
filter: 'brightness(60%)',
is your site main color is green?
yeah
here's the problem
the green is mixing with background
that doesn't look too bad
if you can use photoshop and mirror the right side twice so it's flower on both sides it could've been better
oh yea
good idea
but seems a bit hard
right right side on that one looks fine the left side kinda hard to read the green
this one has the opposite
i think this is easy to read
and more clean
what u think
green with green
what if you make it a green opaque overlay. and make the image and title white? You could try
i changed the direction of the gradient
the top is whiter
i think that's better
which image is better u think
i think this
that seems good idea
yup this looks good
how can I make opaque overlay
you now have a gradient. make the first color stop 100% and let it go transparent (or whatever, doesnt matter)
something like
background-image: linear-gradient(0deg, rgba(0,89,12, 0.2), rgba(255, 255, 255, 1)), url('/images/paeonia_new2.jpg');
is this better ?
imo this is better than white opaque
it was white before
what u thinkUnknown User•3y ago
Message Not Public
Sign In & Join Server To View
I don't know. maybe it is a just to detailed image.
You can also ask in #ui-ux there are people with a better eye for design
Unknown User•3y ago
Message Not Public
Sign In & Join Server To View
image darker gets rly bad
i think i would go for a much lighter image and green/black text
me too
how's this one ?
fck it its too hard
the green leaf it too green 😉
another idea. instead of the gradient on the full footer. What if you do it on the inner container and a lot lot lighter. Then you'll have some color at the side, but more clear behind the text
or blur the background to get rid of some hard details (but then you'll have to put the background-image in a pseudo element)
Unknown User•3y ago
Message Not Public
Sign In & Join Server To View
the more i play
the more shitty it gets
do you have a codepen?
no man
this is getting too much time-waste
gonna leave it like this
😄
@MarkBoots how do u decide which font family ?
u experienced ithat ?
I normaly work from what is given by designer / business style guide
Else i try to match what is in the logo.
And if that won't work... I struggle too.
I chose Inter
since it was more in line with logo text
for readability serif fonts are better, so I'd try that too. specially for longer text
but your current one looks nice and safe too
(Note: Im not a designer)
thanks
do I have to write
All Rights Reserved ?Well, it is kind of a protection for your content.
https://www.legalzoom.com/articles/the-term-all-rights-reserved-explained
(Although I am also not a legal expert.... I just realized I am not a lot of things 😉 )
The Term "All Rights Reserved" Explained
Protecting your creative work requires a basic understanding of copyrights, including the meaning and use of the phrase “all rights reserved."
maybe this is less busy
and safer option ?
i think this one is better than the other one
yea much better
i agree
%100
this one or the above guys ?
this will be final
i liked it too
you could try to give the paragraph a tiny little white text-shadow to distanciate it even a bit more
oh yea
that's a great idea.
i opened the image a bit here
does it make it look more busy ?_
i like it
ok i decided this
looks much less busy
and clean as hell
fcking deciding everything is hard 🙂
this or that that or this
how's the header ? @vince._ @MarkBoots
i tried to made it compatible
is it too bri,ght?
header should have no bg image
i'd honestly make the header and footer have no bg image
says where ?
no where, my opinion
Unknown User•3y ago
Message Not Public
Sign In & Join Server To View
just peonies
thanks for feedback
Are you sure these are not peonies?
Unknown User•3y ago
Message Not Public
Sign In & Join Server To View
you scaring me man
indeed they look
i found those on pexels.com
by searching for paeonia
Unknown User•3y ago
Message Not Public
Sign In & Join Server To View
i agree
i had the same thought
hopefully client wouldN't mind either way.
Kevin has a video with a great trick to
isolation: isolate the background image, so you could change the opacity of it, and add a filter on top, so font would be readable regardless of the color.What!!! You can do that?! So you don't need an overlay??
Kevin Powell
YouTube
Lower the opacity of a background-image with CSS
We can play with the opacity of colors by changing the alpha value of them very easily, but with background-images, we’re a little more stuck with what we have… or are we?
⌚ Timestamps
00:00 - Introduction
00:38 - the first thing people usually try
1:32 - creating the pseudo-element
4:38 - putting the background-image on the pseudo-element
5:0...
Thank you !!
Wow
thanks so much for pointing that out 🙂