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
11k1723
asked Nov 15 '18 at 3:25
TipTopTipTop
13
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
11k1723
asked Nov 15 '18 at 3:25
TipTopTipTop
13
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
11k1723
asked Nov 15 '18 at 3:25
TipTopTipTop
13
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
11k1723
asked Nov 15 '18 at 3:25
TipTopTipTop
13
edited Nov 15 '18 at 9:50
Mihai T
11k1723
asked Nov 15 '18 at 3:25
TipTopTipTop
13
edited Nov 15 '18 at 9:50
Mihai T
11k1723
edited Nov 15 '18 at 9:50
Mihai T
11k1723
edited Nov 15 '18 at 9:50
Mihai T
11k1723
11k1723
asked Nov 15 '18 at 3:25
TipTopTipTop
13
asked Nov 15 '18 at 3:25
TipTopTipTop
13
asked Nov 15 '18 at 3:25
TipTopTipTop
13
13
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
927112
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
927112
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
927112
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
927112
.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
927112
answered Nov 16 '18 at 6:09
Joykal InfotechJoykal Infotech
927112
answered Nov 16 '18 at 6:09
Joykal InfotechJoykal Infotech
927112
answered Nov 16 '18 at 6:09
Joykal InfotechJoykal Infotech
927112
927112
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