Why does my header image appear blurry on a larger screen
up vote
1
down vote
favorite
The header image looks good on every screen except for larger monitors can somebody please help me out?
http://houstonprimepestcontrol.com/
html css responsive-design bootstrap-4 media-queries
asked Nov 22 at 0:02
andrewz
62
add a comment |
up vote
1
down vote
favorite
The header image looks good on every screen except for larger monitors can somebody please help me out?
http://houstonprimepestcontrol.com/
html css responsive-design bootstrap-4 media-queries
asked Nov 22 at 0:02
andrewz
62
Can you please post some of your code? It might make it easier to assist you. Also i'd suggest you rework your HTML, i would not make the background image part of the header. It's going to give you issues cutting off when expanded.
– Robert Perez
Nov 22 at 0:17
add a comment |
up vote
1
down vote
favorite
up vote
1
down vote
favorite
The header image looks good on every screen except for larger monitors can somebody please help me out?
http://houstonprimepestcontrol.com/
html css responsive-design bootstrap-4 media-queries
asked Nov 22 at 0:02
andrewz
62
The header image looks good on every screen except for larger monitors can somebody please help me out?
http://houstonprimepestcontrol.com/
html css responsive-design bootstrap-4 media-queries
html css responsive-design bootstrap-4 media-queries
asked Nov 22 at 0:02
andrewz
62
asked Nov 22 at 0:02
andrewz
62
asked Nov 22 at 0:02
andrewz
62
asked Nov 22 at 0:02
andrewz
62
asked Nov 22 at 0:02
andrewz
62
62
Can you please post some of your code? It might make it easier to assist you. Also i'd suggest you rework your HTML, i would not make the background image part of the header. It's going to give you issues cutting off when expanded.
– Robert Perez
Nov 22 at 0:17
add a comment |
Can you please post some of your code? It might make it easier to assist you. Also i'd suggest you rework your HTML, i would not make the background image part of the header. It's going to give you issues cutting off when expanded.
– Robert Perez
Nov 22 at 0:17
Can you please post some of your code? It might make it easier to assist you. Also i'd suggest you rework your HTML, i would not make the background image part of the header. It's going to give you issues cutting off when expanded.
– Robert Perez
Nov 22 at 0:17
Can you please post some of your code? It might make it easier to assist you. Also i'd suggest you rework your HTML, i would not make the background image part of the header. It's going to give you issues cutting off when expanded.
– Robert Perez
Nov 22 at 0:17
add a comment |
3 Answers
3
active
oldest
votes
up vote
5
down vote
This is probably because you are using rasterize graphics in low resolution, no vector graphics (SVG).
answered Nov 22 at 0:14
Maciej B
513
This does not provide an answer to the question. Once you have sufficient reputation you will be able to comment on any post; instead, provide answers that don't require clarification from the asker. - From Review
– Nic3500
Nov 22 at 3:33
Hi, I think that my explanation is clear enough. I assume that asking person knows, how to use graphical programs. Even if not, this is not a forum about graphical design, so I think, that giving instructions, about how to use the graphical software it's not my business
– Maciej B
Nov 22 at 11:49
add a comment |
up vote
1
down vote
Your header image is a background-image with size of 50% so its size depends on the size of its container, and its container is a flexbox.
answered Nov 22 at 0:22
Maarti
1,0141721
add a comment |
up vote
1
down vote
As Maciej B. pointed out, vector graphics look better on large screens. This is because they store information about the shapes that form the picture, while raster graphics store the individual pixels. When the image is blown up or zoomed in, low-resolution raster graphics don't work well because there are now less pixels in a given space, or dots per inch (dpi). Higher dpi images can fix this, but vector is usually better. Because it saves the lines and shapes, the device can generate, or rasterize, this information into pixels it can display.
answered Nov 22 at 0:28
LukeDev
155
add a comment |
3 Answers
3
active
oldest
votes
3 Answers
3
active
oldest
votes
active
oldest
votes
active
oldest
votes
up vote
5
down vote
This is probably because you are using rasterize graphics in low resolution, no vector graphics (SVG).
answered Nov 22 at 0:14
Maciej B
513
This does not provide an answer to the question. Once you have sufficient reputation you will be able to comment on any post; instead, provide answers that don't require clarification from the asker. - From Review
– Nic3500
Nov 22 at 3:33
Hi, I think that my explanation is clear enough. I assume that asking person knows, how to use graphical programs. Even if not, this is not a forum about graphical design, so I think, that giving instructions, about how to use the graphical software it's not my business
– Maciej B
Nov 22 at 11:49
add a comment |
up vote
5
down vote
This is probably because you are using rasterize graphics in low resolution, no vector graphics (SVG).
answered Nov 22 at 0:14
Maciej B
513
This does not provide an answer to the question. Once you have sufficient reputation you will be able to comment on any post; instead, provide answers that don't require clarification from the asker. - From Review
– Nic3500
Nov 22 at 3:33
Hi, I think that my explanation is clear enough. I assume that asking person knows, how to use graphical programs. Even if not, this is not a forum about graphical design, so I think, that giving instructions, about how to use the graphical software it's not my business
– Maciej B
Nov 22 at 11:49
add a comment |
up vote
5
down vote
up vote
5
down vote
This is probably because you are using rasterize graphics in low resolution, no vector graphics (SVG).
answered Nov 22 at 0:14
Maciej B
513
This is probably because you are using rasterize graphics in low resolution, no vector graphics (SVG).
answered Nov 22 at 0:14
Maciej B
513
answered Nov 22 at 0:14
Maciej B
513
answered Nov 22 at 0:14
Maciej B
513
answered Nov 22 at 0:14
Maciej B
513
513
This does not provide an answer to the question. Once you have sufficient reputation you will be able to comment on any post; instead, provide answers that don't require clarification from the asker. - From Review
– Nic3500
Nov 22 at 3:33
Hi, I think that my explanation is clear enough. I assume that asking person knows, how to use graphical programs. Even if not, this is not a forum about graphical design, so I think, that giving instructions, about how to use the graphical software it's not my business
– Maciej B
Nov 22 at 11:49
add a comment |
This does not provide an answer to the question. Once you have sufficient reputation you will be able to comment on any post; instead, provide answers that don't require clarification from the asker. - From Review
– Nic3500
Nov 22 at 3:33
Hi, I think that my explanation is clear enough. I assume that asking person knows, how to use graphical programs. Even if not, this is not a forum about graphical design, so I think, that giving instructions, about how to use the graphical software it's not my business
– Maciej B
Nov 22 at 11:49
This does not provide an answer to the question. Once you have sufficient reputation you will be able to comment on any post; instead, provide answers that don't require clarification from the asker. - From Review
– Nic3500
Nov 22 at 3:33
This does not provide an answer to the question. Once you have sufficient reputation you will be able to comment on any post; instead, provide answers that don't require clarification from the asker. - From Review
– Nic3500
Nov 22 at 3:33
Hi, I think that my explanation is clear enough. I assume that asking person knows, how to use graphical programs. Even if not, this is not a forum about graphical design, so I think, that giving instructions, about how to use the graphical software it's not my business
– Maciej B
Nov 22 at 11:49
Hi, I think that my explanation is clear enough. I assume that asking person knows, how to use graphical programs. Even if not, this is not a forum about graphical design, so I think, that giving instructions, about how to use the graphical software it's not my business
– Maciej B
Nov 22 at 11:49
add a comment |
up vote
1
down vote
Your header image is a background-image with size of 50% so its size depends on the size of its container, and its container is a flexbox.
answered Nov 22 at 0:22
Maarti
1,0141721
add a comment |
up vote
1
down vote
Your header image is a background-image with size of 50% so its size depends on the size of its container, and its container is a flexbox.
answered Nov 22 at 0:22
Maarti
1,0141721
add a comment |
up vote
1
down vote
up vote
1
down vote
Your header image is a background-image with size of 50% so its size depends on the size of its container, and its container is a flexbox.
answered Nov 22 at 0:22
Maarti
1,0141721
Your header image is a background-image with size of 50% so its size depends on the size of its container, and its container is a flexbox.
answered Nov 22 at 0:22
Maarti
1,0141721
answered Nov 22 at 0:22
Maarti
1,0141721
answered Nov 22 at 0:22
Maarti
1,0141721
answered Nov 22 at 0:22
Maarti
1,0141721
1,0141721
add a comment |
add a comment |
up vote
1
down vote
As Maciej B. pointed out, vector graphics look better on large screens. This is because they store information about the shapes that form the picture, while raster graphics store the individual pixels. When the image is blown up or zoomed in, low-resolution raster graphics don't work well because there are now less pixels in a given space, or dots per inch (dpi). Higher dpi images can fix this, but vector is usually better. Because it saves the lines and shapes, the device can generate, or rasterize, this information into pixels it can display.
answered Nov 22 at 0:28
LukeDev
155
add a comment |
up vote
1
down vote
As Maciej B. pointed out, vector graphics look better on large screens. This is because they store information about the shapes that form the picture, while raster graphics store the individual pixels. When the image is blown up or zoomed in, low-resolution raster graphics don't work well because there are now less pixels in a given space, or dots per inch (dpi). Higher dpi images can fix this, but vector is usually better. Because it saves the lines and shapes, the device can generate, or rasterize, this information into pixels it can display.
answered Nov 22 at 0:28
LukeDev
155
add a comment |
up vote
1
down vote
up vote
1
down vote
As Maciej B. pointed out, vector graphics look better on large screens. This is because they store information about the shapes that form the picture, while raster graphics store the individual pixels. When the image is blown up or zoomed in, low-resolution raster graphics don't work well because there are now less pixels in a given space, or dots per inch (dpi). Higher dpi images can fix this, but vector is usually better. Because it saves the lines and shapes, the device can generate, or rasterize, this information into pixels it can display.
answered Nov 22 at 0:28
LukeDev
155
As Maciej B. pointed out, vector graphics look better on large screens. This is because they store information about the shapes that form the picture, while raster graphics store the individual pixels. When the image is blown up or zoomed in, low-resolution raster graphics don't work well because there are now less pixels in a given space, or dots per inch (dpi). Higher dpi images can fix this, but vector is usually better. Because it saves the lines and shapes, the device can generate, or rasterize, this information into pixels it can display.
answered Nov 22 at 0:28
LukeDev
155
answered Nov 22 at 0:28
LukeDev
155
answered Nov 22 at 0:28
LukeDev
155
answered Nov 22 at 0:28
LukeDev
155
155
add a comment |
add a comment |
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%2f53422139%2fwhy-does-my-header-image-appear-blurry-on-a-larger-screen%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
Can you please post some of your code? It might make it easier to assist you. Also i'd suggest you rework your HTML, i would not make the background image part of the header. It's going to give you issues cutting off when expanded.
– Robert Perez
Nov 22 at 0:17