Top Header Img Left on Computers & Center on phones & Tablets
0
Today I added a colored background table with a animated gif in the table to the top of some software that I'm editing. With proper css, how can I get the image to always be Left on computer screens, and Centered on phones & tablets? Below is how I have the current HTML. Thanks! :--)
<table style="width: 100%;">
<tbody>
<tr>
<td style="background-color: #663399;">
<div><img src="Image URL" alt="Animated Gif"></div>
</td>
</tr>
</tbody>
</table>image css3 responsive
edited Nov 15 '18 at 9:50
Mihai T
11.5k1924
asked Nov 15 '18 at 3:25
TipTopTipTop
35
add a comment |
0
Today I added a colored background table with a animated gif in the table to the top of some software that I'm editing. With proper css, how can I get the image to always be Left on computer screens, and Centered on phones & tablets? Below is how I have the current HTML. Thanks! :--)
<table style="width: 100%;">
<tbody>
<tr>
<td style="background-color: #663399;">
<div><img src="Image URL" alt="Animated Gif"></div>
</td>
</tr>
</tbody>
</table>image css3 responsive
edited Nov 15 '18 at 9:50
Mihai T
11.5k1924
asked Nov 15 '18 at 3:25
TipTopTipTop
35
I don't see any code in your question...
– Joel
Nov 15 '18 at 3:41
S O Isn't showing the code, but when I click on Edit, I see it. It's a basic table code with style= css, and <div></div> outside of the image code url. I need to get off the computer for the rest of the night. :--)
– TipTop
Nov 15 '18 at 4:35
can you write separate CSS ? or only inline css ?
– Mihai T
Nov 15 '18 at 9:50
Now the Code is showing. I could put css in a (.css) file, put it in between <script>css here</script>. :--)
– TipTop
Nov 15 '18 at 16:10
Thanks! Does that run on All computer & mobile browsers?! :--)
– TipTop
Nov 16 '18 at 8:01
add a comment |
0
0
0
Today I added a colored background table with a animated gif in the table to the top of some software that I'm editing. With proper css, how can I get the image to always be Left on computer screens, and Centered on phones & tablets? Below is how I have the current HTML. Thanks! :--)
<table style="width: 100%;">
<tbody>
<tr>
<td style="background-color: #663399;">
<div><img src="Image URL" alt="Animated Gif"></div>
</td>
</tr>
</tbody>
</table>image css3 responsive
edited Nov 15 '18 at 9:50
Mihai T
11.5k1924
asked Nov 15 '18 at 3:25
TipTopTipTop
35
Today I added a colored background table with a animated gif in the table to the top of some software that I'm editing. With proper css, how can I get the image to always be Left on computer screens, and Centered on phones & tablets? Below is how I have the current HTML. Thanks! :--)
<table style="width: 100%;">
<tbody>
<tr>
<td style="background-color: #663399;">
<div><img src="Image URL" alt="Animated Gif"></div>
</td>
</tr>
</tbody>
</table><table style="width: 100%;">
<tbody>
<tr>
<td style="background-color: #663399;">
<div><img src="Image URL" alt="Animated Gif"></div>
</td>
</tr>
</tbody>
</table><table style="width: 100%;">
<tbody>
<tr>
<td style="background-color: #663399;">
<div><img src="Image URL" alt="Animated Gif"></div>
</td>
</tr>
</tbody>
</table>image css3 responsive
image css3 responsive
edited Nov 15 '18 at 9:50
Mihai T
11.5k1924
asked Nov 15 '18 at 3:25
TipTopTipTop
35
edited Nov 15 '18 at 9:50
Mihai T
11.5k1924
asked Nov 15 '18 at 3:25
TipTopTipTop
35
edited Nov 15 '18 at 9:50
Mihai T
11.5k1924
edited Nov 15 '18 at 9:50
Mihai T
11.5k1924
edited Nov 15 '18 at 9:50
Mihai T
11.5k1924
11.5k1924
asked Nov 15 '18 at 3:25
TipTopTipTop
35
asked Nov 15 '18 at 3:25
TipTopTipTop
35
asked Nov 15 '18 at 3:25
TipTopTipTop
35
35
I don't see any code in your question...
– Joel
Nov 15 '18 at 3:41
S O Isn't showing the code, but when I click on Edit, I see it. It's a basic table code with style= css, and <div></div> outside of the image code url. I need to get off the computer for the rest of the night. :--)
– TipTop
Nov 15 '18 at 4:35
can you write separate CSS ? or only inline css ?
– Mihai T
Nov 15 '18 at 9:50
Now the Code is showing. I could put css in a (.css) file, put it in between <script>css here</script>. :--)
– TipTop
Nov 15 '18 at 16:10
Thanks! Does that run on All computer & mobile browsers?! :--)
– TipTop
Nov 16 '18 at 8:01
add a comment |
I don't see any code in your question...
– Joel
Nov 15 '18 at 3:41
S O Isn't showing the code, but when I click on Edit, I see it. It's a basic table code with style= css, and <div></div> outside of the image code url. I need to get off the computer for the rest of the night. :--)
– TipTop
Nov 15 '18 at 4:35
can you write separate CSS ? or only inline css ?
– Mihai T
Nov 15 '18 at 9:50
Now the Code is showing. I could put css in a (.css) file, put it in between <script>css here</script>. :--)
– TipTop
Nov 15 '18 at 16:10
Thanks! Does that run on All computer & mobile browsers?! :--)
– TipTop
Nov 16 '18 at 8:01
I don't see any code in your question...
– Joel
Nov 15 '18 at 3:41
I don't see any code in your question...
– Joel
Nov 15 '18 at 3:41
S O Isn't showing the code, but when I click on Edit, I see it. It's a basic table code with style= css, and <div></div> outside of the image code url. I need to get off the computer for the rest of the night. :--)
– TipTop
Nov 15 '18 at 4:35
S O Isn't showing the code, but when I click on Edit, I see it. It's a basic table code with style= css, and <div></div> outside of the image code url. I need to get off the computer for the rest of the night. :--)
– TipTop
Nov 15 '18 at 4:35
can you write separate CSS ? or only inline css ?
– Mihai T
Nov 15 '18 at 9:50
can you write separate CSS ? or only inline css ?
– Mihai T
Nov 15 '18 at 9:50
Now the Code is showing. I could put css in a (.css) file, put it in between <script>css here</script>. :--)
– TipTop
Nov 15 '18 at 16:10
Now the Code is showing. I could put css in a (.css) file, put it in between <script>css here</script>. :--)
– TipTop
Nov 15 '18 at 16:10
Thanks! Does that run on All computer & mobile browsers?! :--)
– TipTop
Nov 16 '18 at 8:01
Thanks! Does that run on All computer & mobile browsers?! :--)
– TipTop
Nov 16 '18 at 8:01
add a comment |
1 Answer
1
active
oldest
votes
0
.img-wraper
text-align: left;
.img-wraper img
display: inline-block;
@media (max-width: 1024px)
.img-wraper
text-align: center;
<table style="width: 100%;">
<tbody>
<tr>
<td style="background-color: #663399;">
<div class="img-wraper"><img src="Image URL" alt="Animated Gif"></div>
</td>
</tr>
</tbody>
</table>answered Nov 16 '18 at 6:09
Joykal InfotechJoykal Infotech
1,003216
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
);
);
draft saved
draft discarded
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%2f53311970%2ftop-header-img-left-on-computers-center-on-phones-tablets%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
0
.img-wraper
text-align: left;
.img-wraper img
display: inline-block;
@media (max-width: 1024px)
.img-wraper
text-align: center;
<table style="width: 100%;">
<tbody>
<tr>
<td style="background-color: #663399;">
<div class="img-wraper"><img src="Image URL" alt="Animated Gif"></div>
</td>
</tr>
</tbody>
</table>answered Nov 16 '18 at 6:09
Joykal InfotechJoykal Infotech
1,003216
add a comment |
0
.img-wraper
text-align: left;
.img-wraper img
display: inline-block;
@media (max-width: 1024px)
.img-wraper
text-align: center;
<table style="width: 100%;">
<tbody>
<tr>
<td style="background-color: #663399;">
<div class="img-wraper"><img src="Image URL" alt="Animated Gif"></div>
</td>
</tr>
</tbody>
</table>answered Nov 16 '18 at 6:09
Joykal InfotechJoykal Infotech
1,003216
add a comment |
0
0
0
.img-wraper
text-align: left;
.img-wraper img
display: inline-block;
@media (max-width: 1024px)
.img-wraper
text-align: center;
<table style="width: 100%;">
<tbody>
<tr>
<td style="background-color: #663399;">
<div class="img-wraper"><img src="Image URL" alt="Animated Gif"></div>
</td>
</tr>
</tbody>
</table>answered Nov 16 '18 at 6:09
Joykal InfotechJoykal Infotech
1,003216
.img-wraper
text-align: left;
.img-wraper img
display: inline-block;
@media (max-width: 1024px)
.img-wraper
text-align: center;
<table style="width: 100%;">
<tbody>
<tr>
<td style="background-color: #663399;">
<div class="img-wraper"><img src="Image URL" alt="Animated Gif"></div>
</td>
</tr>
</tbody>
</table>.img-wraper
text-align: left;
.img-wraper img
display: inline-block;
@media (max-width: 1024px)
.img-wraper
text-align: center;
<table style="width: 100%;">
<tbody>
<tr>
<td style="background-color: #663399;">
<div class="img-wraper"><img src="Image URL" alt="Animated Gif"></div>
</td>
</tr>
</tbody>
</table>.img-wraper
text-align: left;
.img-wraper img
display: inline-block;
@media (max-width: 1024px)
.img-wraper
text-align: center;
<table style="width: 100%;">
<tbody>
<tr>
<td style="background-color: #663399;">
<div class="img-wraper"><img src="Image URL" alt="Animated Gif"></div>
</td>
</tr>
</tbody>
</table>answered Nov 16 '18 at 6:09
Joykal InfotechJoykal Infotech
1,003216
answered Nov 16 '18 at 6:09
Joykal InfotechJoykal Infotech
1,003216
answered Nov 16 '18 at 6:09
Joykal InfotechJoykal Infotech
1,003216
answered Nov 16 '18 at 6:09
Joykal InfotechJoykal Infotech
1,003216
1,003216
add a comment |
add a comment |
draft saved
draft discarded
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.
draft saved
draft discarded
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%2f53311970%2ftop-header-img-left-on-computers-center-on-phones-tablets%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
I don't see any code in your question...
– Joel
Nov 15 '18 at 3:41
S O Isn't showing the code, but when I click on Edit, I see it. It's a basic table code with style= css, and <div></div> outside of the image code url. I need to get off the computer for the rest of the night. :--)
– TipTop
Nov 15 '18 at 4:35
can you write separate CSS ? or only inline css ?
– Mihai T
Nov 15 '18 at 9:50
Now the Code is showing. I could put css in a (.css) file, put it in between <script>css here</script>. :--)
– TipTop
Nov 15 '18 at 16:10
Thanks! Does that run on All computer & mobile browsers?! :--)
– TipTop
Nov 16 '18 at 8:01