Write text on background image is not responsiveVertically align text next to an image?When to use IMG vs. CSS background-image?How do I give text or an image a transparent background using CSS?How to disable text selection highlighting?Stretch and scale a CSS image in the background - with CSS onlyHow do I combine a background-image and CSS3 gradient on the same element?How do I auto-resize an image to fit a 'div' container?How do I vertically center text with CSS?Background image jumps when address bar hides iOS/Android/Mobile ChromeIn CSS Flexbox, why are there no “justify-items” and “justify-self” properties?
How important is a good quality camera for good photography?
What do I do when a student working in my lab "ghosts" me?
Is it legal for private citizens to "impound" e-scooters?
How is the uk visa 180 calculated
How to copy a file transactionally?
Why are there not any MRI machines available in Interstellar?
What are the exact meanings of roll, pitch and yaw?
Does the Intel 8086 CPU have user mode and kernel mode?
Area of parallelogram = Area of square. Shear transform
Can two figures have the same area, perimeter, and same number of segments have different shape?
Why isn't there a serious attempt at creating a third mass-appeal party in the US?
Explanation for a joke about a three-legged dog that walks into a bar
How do I run a game when my PCs have different approaches to combat?
kids pooling money for Lego League and taxes
What does Kasparov mean by "I was behind in three and even in one after six games"?
Why was Sauron not trying to find the Ring, and instead of preparing for war?
Trapped in an ocean Temple in Minecraft?
What was the rationale behind 36 bit computer architectures?
On the strategic interest of giving long lasting stock orders
A planet illuminated by a black hole?
What is the meaning of "you has the wind of me"?
Terence Tao–type books in other fields?
USA: Can a witness take the 5th to avoid perjury?
Other than a swing wing, what types of variable geometry have flown?
Write text on background image is not responsive
Vertically align text next to an image?When to use IMG vs. CSS background-image?How do I give text or an image a transparent background using CSS?How to disable text selection highlighting?Stretch and scale a CSS image in the background - with CSS onlyHow do I combine a background-image and CSS3 gradient on the same element?How do I auto-resize an image to fit a 'div' container?How do I vertically center text with CSS?Background image jumps when address bar hides iOS/Android/Mobile ChromeIn CSS Flexbox, why are there no “justify-items” and “justify-self” properties?
.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty margin-bottom:0;
I want to write some text on image, i set the image as background to my div element but when i write the text it goes outside the image in small screen devices. how can that be fixed to make it full responsive ? I've write this code :
#background
background: url("../../imgs/88246.jpg") no-repeat;
background-size: 100%;
<div class="h-100 container-fluid">
<div id="background" class="row h-100 justify-content-center align-items-center">
<h1 class="display-4">AYMAN TARIG</h1>
</div>
</div>html css bootstrap-4
edited Mar 26 at 19:13
Eddie
3162 silver badges13 bronze badges
asked Mar 26 at 16:46
Ayman TarigAyman Tarig
63 bronze badges
add a comment |
I want to write some text on image, i set the image as background to my div element but when i write the text it goes outside the image in small screen devices. how can that be fixed to make it full responsive ? I've write this code :
#background
background: url("../../imgs/88246.jpg") no-repeat;
background-size: 100%;
<div class="h-100 container-fluid">
<div id="background" class="row h-100 justify-content-center align-items-center">
<h1 class="display-4">AYMAN TARIG</h1>
</div>
</div>html css bootstrap-4
edited Mar 26 at 19:13
Eddie
3162 silver badges13 bronze badges
asked Mar 26 at 16:46
Ayman TarigAyman Tarig
63 bronze badges
1
Use two images, one on top of the other, background image struggles with responsive requirements.
– pokeybit
Mar 26 at 16:48
If the text isn't part of the image you can control it with CSS, media query or using vw measures.
– Germano Plebani
Mar 26 at 16:51
@pokeybit how to use two images ?
– Ayman Tarig
Mar 26 at 16:53
Change your background-size tobackground-size: cover;and then you can change yourbackground-positionif you like
– git-e-up
Mar 26 at 17:22
@AymanTarig use cssposition:absolute;left:0px;top:0px;on the image you wish to be on top and place it after the image you want underneath. Don't forget to assignposition:relative;to the parent container if it's not set by default. You might need to use cssz-indexalso which controls which dom element appears behind or in front. Google is your friend :)
– pokeybit
Mar 27 at 19:23
add a comment |
I want to write some text on image, i set the image as background to my div element but when i write the text it goes outside the image in small screen devices. how can that be fixed to make it full responsive ? I've write this code :
#background
background: url("../../imgs/88246.jpg") no-repeat;
background-size: 100%;
<div class="h-100 container-fluid">
<div id="background" class="row h-100 justify-content-center align-items-center">
<h1 class="display-4">AYMAN TARIG</h1>
</div>
</div>html css bootstrap-4
edited Mar 26 at 19:13
Eddie
3162 silver badges13 bronze badges
asked Mar 26 at 16:46
Ayman TarigAyman Tarig
63 bronze badges
I want to write some text on image, i set the image as background to my div element but when i write the text it goes outside the image in small screen devices. how can that be fixed to make it full responsive ? I've write this code :
#background
background: url("../../imgs/88246.jpg") no-repeat;
background-size: 100%;
<div class="h-100 container-fluid">
<div id="background" class="row h-100 justify-content-center align-items-center">
<h1 class="display-4">AYMAN TARIG</h1>
</div>
</div>#background
background: url("../../imgs/88246.jpg") no-repeat;
background-size: 100%;
<div class="h-100 container-fluid">
<div id="background" class="row h-100 justify-content-center align-items-center">
<h1 class="display-4">AYMAN TARIG</h1>
</div>
</div>#background
background: url("../../imgs/88246.jpg") no-repeat;
background-size: 100%;
<div class="h-100 container-fluid">
<div id="background" class="row h-100 justify-content-center align-items-center">
<h1 class="display-4">AYMAN TARIG</h1>
</div>
</div>html css bootstrap-4
html css bootstrap-4
edited Mar 26 at 19:13
Eddie
3162 silver badges13 bronze badges
asked Mar 26 at 16:46
Ayman TarigAyman Tarig
63 bronze badges
edited Mar 26 at 19:13
Eddie
3162 silver badges13 bronze badges
asked Mar 26 at 16:46
Ayman TarigAyman Tarig
63 bronze badges
edited Mar 26 at 19:13
Eddie
3162 silver badges13 bronze badges
edited Mar 26 at 19:13
Eddie
3162 silver badges13 bronze badges
edited Mar 26 at 19:13
Eddie
3162 silver badges13 bronze badges
3162 silver badges13 bronze badges
asked Mar 26 at 16:46
Ayman TarigAyman Tarig
63 bronze badges
asked Mar 26 at 16:46
Ayman TarigAyman Tarig
63 bronze badges
asked Mar 26 at 16:46
Ayman TarigAyman Tarig
63 bronze badges
63 bronze badges
1
Use two images, one on top of the other, background image struggles with responsive requirements.
– pokeybit
Mar 26 at 16:48
If the text isn't part of the image you can control it with CSS, media query or using vw measures.
– Germano Plebani
Mar 26 at 16:51
@pokeybit how to use two images ?
– Ayman Tarig
Mar 26 at 16:53
Change your background-size tobackground-size: cover;and then you can change yourbackground-positionif you like
– git-e-up
Mar 26 at 17:22
@AymanTarig use cssposition:absolute;left:0px;top:0px;on the image you wish to be on top and place it after the image you want underneath. Don't forget to assignposition:relative;to the parent container if it's not set by default. You might need to use cssz-indexalso which controls which dom element appears behind or in front. Google is your friend :)
– pokeybit
Mar 27 at 19:23
add a comment |
1
Use two images, one on top of the other, background image struggles with responsive requirements.
– pokeybit
Mar 26 at 16:48
If the text isn't part of the image you can control it with CSS, media query or using vw measures.
– Germano Plebani
Mar 26 at 16:51
@pokeybit how to use two images ?
– Ayman Tarig
Mar 26 at 16:53
Change your background-size tobackground-size: cover;and then you can change yourbackground-positionif you like
– git-e-up
Mar 26 at 17:22
@AymanTarig use cssposition:absolute;left:0px;top:0px;on the image you wish to be on top and place it after the image you want underneath. Don't forget to assignposition:relative;to the parent container if it's not set by default. You might need to use cssz-indexalso which controls which dom element appears behind or in front. Google is your friend :)
– pokeybit
Mar 27 at 19:23
1
1
Use two images, one on top of the other, background image struggles with responsive requirements.
– pokeybit
Mar 26 at 16:48
Use two images, one on top of the other, background image struggles with responsive requirements.
– pokeybit
Mar 26 at 16:48
If the text isn't part of the image you can control it with CSS, media query or using vw measures.
– Germano Plebani
Mar 26 at 16:51
If the text isn't part of the image you can control it with CSS, media query or using vw measures.
– Germano Plebani
Mar 26 at 16:51
@pokeybit how to use two images ?
– Ayman Tarig
Mar 26 at 16:53
@pokeybit how to use two images ?
– Ayman Tarig
Mar 26 at 16:53
Change your background-size to
background-size: cover; and then you can change your background-position if you like– git-e-up
Mar 26 at 17:22
Change your background-size to
background-size: cover; and then you can change your background-position if you like– git-e-up
Mar 26 at 17:22
@AymanTarig use css
position:absolute;left:0px;top:0px; on the image you wish to be on top and place it after the image you want underneath. Don't forget to assign position:relative; to the parent container if it's not set by default. You might need to use css z-index also which controls which dom element appears behind or in front. Google is your friend :)– pokeybit
Mar 27 at 19:23
@AymanTarig use css
position:absolute;left:0px;top:0px; on the image you wish to be on top and place it after the image you want underneath. Don't forget to assign position:relative; to the parent container if it's not set by default. You might need to use css z-index also which controls which dom element appears behind or in front. Google is your friend :)– pokeybit
Mar 27 at 19:23
add a comment |
2 Answers
2
active
oldest
votes
You can do it by playing around with vw as the font-size and image width so they both resize together responsively. Read more about vw here.
Here's an example of how you can make it work:
#background
background: url("https://images.unsplash.com/photo-1547845737-153b5373560f?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2531&q=80") no-repeat;
background-size: cover;
.h-100
height: 20%;
width: 25vw;
overflow: hidden;
h1
display: block;
font-size: 6vw;
If you go this go codepen you can see what I'm talking about in action:
https://codepen.io/MatthewRader/pen/aMrvrx
answered Mar 26 at 18:43
Matthew T RaderMatthew T Rader
1168 bronze badges
add a comment |
TABLET
@media screen and (max-width: 1024px)
h1 font-size:SIZETHATFITS
PHONE
@media screen and (max-width: 480px)
h1 font-size:SIZETHATFITS
@media screen and (max-width: #px) will only affect the font-size up to that max-width.
answered Mar 26 at 19:18
BillyBilly
669 bronze badges
add a comment |
Your Answer
StackExchange.ifUsing("editor", function ()
StackExchange.using("externalEditor", function ()
StackExchange.using("snippets", function ()
StackExchange.snippets.init();
);
);
, "code-snippets");
StackExchange.ready(function()
var channelOptions =
tags: "".split(" "),
id: "1"
;
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function()
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled)
StackExchange.using("snippets", function()
createEditor();
);
else
createEditor();
);
function createEditor()
StackExchange.prepareEditor(
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader:
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
,
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
);
);
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f55362312%2fwrite-text-on-background-image-is-not-responsive%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
2 Answers
2
active
oldest
votes
2 Answers
2
active
oldest
votes
active
oldest
votes
active
oldest
votes
You can do it by playing around with vw as the font-size and image width so they both resize together responsively. Read more about vw here.
Here's an example of how you can make it work:
#background
background: url("https://images.unsplash.com/photo-1547845737-153b5373560f?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2531&q=80") no-repeat;
background-size: cover;
.h-100
height: 20%;
width: 25vw;
overflow: hidden;
h1
display: block;
font-size: 6vw;
If you go this go codepen you can see what I'm talking about in action:
https://codepen.io/MatthewRader/pen/aMrvrx
answered Mar 26 at 18:43
Matthew T RaderMatthew T Rader
1168 bronze badges
add a comment |
You can do it by playing around with vw as the font-size and image width so they both resize together responsively. Read more about vw here.
Here's an example of how you can make it work:
#background
background: url("https://images.unsplash.com/photo-1547845737-153b5373560f?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2531&q=80") no-repeat;
background-size: cover;
.h-100
height: 20%;
width: 25vw;
overflow: hidden;
h1
display: block;
font-size: 6vw;
If you go this go codepen you can see what I'm talking about in action:
https://codepen.io/MatthewRader/pen/aMrvrx
answered Mar 26 at 18:43
Matthew T RaderMatthew T Rader
1168 bronze badges
add a comment |
You can do it by playing around with vw as the font-size and image width so they both resize together responsively. Read more about vw here.
Here's an example of how you can make it work:
#background
background: url("https://images.unsplash.com/photo-1547845737-153b5373560f?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2531&q=80") no-repeat;
background-size: cover;
.h-100
height: 20%;
width: 25vw;
overflow: hidden;
h1
display: block;
font-size: 6vw;
If you go this go codepen you can see what I'm talking about in action:
https://codepen.io/MatthewRader/pen/aMrvrx
answered Mar 26 at 18:43
Matthew T RaderMatthew T Rader
1168 bronze badges
You can do it by playing around with vw as the font-size and image width so they both resize together responsively. Read more about vw here.
Here's an example of how you can make it work:
#background
background: url("https://images.unsplash.com/photo-1547845737-153b5373560f?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2531&q=80") no-repeat;
background-size: cover;
.h-100
height: 20%;
width: 25vw;
overflow: hidden;
h1
display: block;
font-size: 6vw;
If you go this go codepen you can see what I'm talking about in action:
https://codepen.io/MatthewRader/pen/aMrvrx
answered Mar 26 at 18:43
Matthew T RaderMatthew T Rader
1168 bronze badges
answered Mar 26 at 18:43
Matthew T RaderMatthew T Rader
1168 bronze badges
answered Mar 26 at 18:43
Matthew T RaderMatthew T Rader
1168 bronze badges
answered Mar 26 at 18:43
Matthew T RaderMatthew T Rader
1168 bronze badges
1168 bronze badges
add a comment |
add a comment |
TABLET
@media screen and (max-width: 1024px)
h1 font-size:SIZETHATFITS
PHONE
@media screen and (max-width: 480px)
h1 font-size:SIZETHATFITS
@media screen and (max-width: #px) will only affect the font-size up to that max-width.
answered Mar 26 at 19:18
BillyBilly
669 bronze badges
add a comment |
TABLET
@media screen and (max-width: 1024px)
h1 font-size:SIZETHATFITS
PHONE
@media screen and (max-width: 480px)
h1 font-size:SIZETHATFITS
@media screen and (max-width: #px) will only affect the font-size up to that max-width.
answered Mar 26 at 19:18
BillyBilly
669 bronze badges
add a comment |
TABLET
@media screen and (max-width: 1024px)
h1 font-size:SIZETHATFITS
PHONE
@media screen and (max-width: 480px)
h1 font-size:SIZETHATFITS
@media screen and (max-width: #px) will only affect the font-size up to that max-width.
answered Mar 26 at 19:18
BillyBilly
669 bronze badges
TABLET
@media screen and (max-width: 1024px)
h1 font-size:SIZETHATFITS
PHONE
@media screen and (max-width: 480px)
h1 font-size:SIZETHATFITS
@media screen and (max-width: #px) will only affect the font-size up to that max-width.
answered Mar 26 at 19:18
BillyBilly
669 bronze badges
answered Mar 26 at 19:18
BillyBilly
669 bronze badges
answered Mar 26 at 19:18
BillyBilly
669 bronze badges
answered Mar 26 at 19:18
BillyBilly
669 bronze badges
669 bronze badges
add a comment |
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f55362312%2fwrite-text-on-background-image-is-not-responsive%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
1
Use two images, one on top of the other, background image struggles with responsive requirements.
– pokeybit
Mar 26 at 16:48
If the text isn't part of the image you can control it with CSS, media query or using vw measures.
– Germano Plebani
Mar 26 at 16:51
@pokeybit how to use two images ?
– Ayman Tarig
Mar 26 at 16:53
Change your background-size to
background-size: cover;and then you can change yourbackground-positionif you like– git-e-up
Mar 26 at 17:22
@AymanTarig use css
position:absolute;left:0px;top:0px;on the image you wish to be on top and place it after the image you want underneath. Don't forget to assignposition:relative;to the parent container if it's not set by default. You might need to use cssz-indexalso which controls which dom element appears behind or in front. Google is your friend :)– pokeybit
Mar 27 at 19:23