Bootstrap3: How to prevent duplicate site header?

Question

Joomla

For example, my site header is not monochromatic, but with an image or just a gradient, since bootstrap divides the header into blocks in its grid when the scale changes, it turns out that when the browser window is reduced, it naturally breaks into blocks, and the picture is duplicated, but it is necessary that when the window size is reduced, the cap remains as it is. Is it possible to implement this?

Answer 1

Do not use a standard grid, but make your own block for the header, for example, setting the width and height as a percentage.
Or if you want to use a standard grid, then for each standard viewport width

@media (max-width: @screen-xs-max) { ... }
@media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) { ... }
@media (min-width: @screen-md-min) and (max-width: @screen-md-max) { ... }
@media (min-width: @screen-lg-min) { ... }

customize the display of the header and its blocks using css classes .col-xs-XX, col-sm-XX .col-md-XX, .col-lg-XX, .col-lg[xs,sm,md,lg ]-offset, .visible-xs[xs,sm,md,lg]-block, .col-md[xs,sm,md,lg]-pull-XX, .col-md[xs,sm,md,lg ]-push-XX - here XX numbers from 1 to 12 (12 is the number of columns in the standard grid). For example:
Better yet, read the grid documentation.